Playing SVG animation without waiting for DOM loading

HTML

<p>Example for <a href="https://stackoverflow.com/questions/47517972/svg-animation-waits-for-domload-event-timelinebegin-onstart-is-not-working">Stack Overflow question <i>"SVG animation waits for DOMLoad event, timelineBegin=“onStart” is not working?"</i></a></p>

<p>As noted in the question, there's a delay, because the SVG 1.2 Tiny spec never got adopted by broswers:

<svg width="100" version="1.2" viewbox="0 0 250 250" xmlns:svg="http://www.w3.org/2000/svg" timelineBegin="onStart" baseProfile="tiny">
    <defs>
        <radialgradient id="grad1" cx="0.65" cy="0.78" r="0.08" rx="0.5" ry="1">
            <stop offset="0.8" style="stop-color: #1a1a1a; stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
            <animate id="map-animation" attributeName="r" dur="2500ms" from="0.08" to="1.2" fill="freeze"/>
        </radialgradient>
    </defs>
    <path id="map" fill="url(#grad1)" d="M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
  C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z"/>
</svg>
</p>

<p>An alternative, to avoid the delay, is to wrap it in an iframe:

<iframe width="100" height="100" style="display:inline-block" frameborder="0" src='data:text/html;charset=utf-8,<html><head><style>* {margin:0}</style></head><body><svg width="100" viewbox="0 0 250 250" xmlns:svg="http://www.w3.org/2000/svg">     <defs>         <radialgradient id="grad1" cx="0.65" cy="0.78" r="0.08" rx="0.5" ry="1">             <stop offset="0.8" style="stop-color: %231a1a1a; stop-opacity:1"></stop>             <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>             <animate id="map-animation" attributeName="r" dur="2500ms" from="0.08" to="1.2" fill="freeze"/>         </radialgradient>     </defs>     <path id="map" fill="url(%23grad1)"...

CSS

svg, iframe {vertical-align:middle;}