Skip to content Skip to sidebar Skip to footer
Home / Html / Svg

Why Are SVG Objects Always Drawn Later?

Post a Comment
In my HTML5 page, I'm incorporating SVG with fallback the following way. Behind is a background :

Solution 1:

SVG object are not always drawn later. It depends on the way they are embbed in the HTML page. If you want an instant drawing of the SVG and a fallback without javascript, you have to use either :

The CSS background technique

The SVG will be referenced in the CSS. Because CSS is loaded in the head section, it will draw the SVG as it appears in the HTML code.

.my-element {
    background-image: url(fallback.png);
    background-image: 
    linear-gradient(transparent, transparent),
    url(image.svg);
}

More details on how to use this technique

The inline SVG with foreignObject technique

Because it's inline, the SVG will be drawn as it appears in the HTML code.

<svg>
    <switch>
        <g>
           /* Here the SVG code */
        </g>
        <foreignObject>
            /* Here the image fallback */
        </foreignObject>
    </switch>
</svg>

More details on how to use this technique

All the others SVG inclusion techniques, will result in a delay in the displaying of the SVG.


You may like these posts

Post a Comment for "Why Are SVG Objects Always Drawn Later?"

Menu Halaman Statis