dev-resources.site

for different kinds of informations.

Web Page Speed Optimization Embed SVG Inline

Published at

12/9/2022

Advantages of putting SVG inline

No additional request, as they are part of the HTML document
This has an impact when you have many small SVG on a page.
The extra code inside the HTML will be downloaded faster than requesting images via url

This will impact positively the First Contentful Paint (part of Page Speed)

You can control the appearance of the graphics via the style sheets (css), including hover effects.

In case it is needed, you can access the SVG elements via javascript (with is not possible with <img> or background-image and with <object> you need to access the contentDocument.

Problem with BackGround-Image in CSS file

If you have a large number of background images within your CSS file, a web browser such as Google Chrome will take a lot longer to parse the CSS file and pull the images from it and this will delay the loading of the entire page, potentially causing visitors to leave your website.

When not to use inline SVG

When the SVG images are placed on all pages, example icons in Footer, but no hover effects are needed (static icons), adding the SVG image with a <img> tag is best.

Do not use background-image in CSS style due blocking loading
Make sure the caching on Internet server are set for SVG type
When the SVG is to big

Example Inline SVG

The following HTML code shows to to implement the Instagram icon in black, and when hover over the icon, it will show the official colours of Instagram

How It works?

Open the SVG in a text editor and copy the content <svg …. </svg>
In the CSS, the Fill parameter is the “secret”
a.smi SVG > fill: black (Icon will be showed in black)
a.smi SVG:hover : fill: url(#smiHover);
#smiHover is the ID in the <defs> part of the <svg>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a.smi svg{
            background: transparent;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            fill: currentColor;
            overflow: hidden;
           fill:black; 
        }
            a.smi svg:hover{
                fill: url(#smiHover);
            }  
    </style>
</head>
<body>
    <a href="https://instagram.com" rel="nofollow" target="_blank" class="smi">
        <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
            <defs>
                <radialGradient id="smiHover" cx="-176.5118" cy="297.2518" r="711.335" gradientTransform="matrix(5.683089e-02 -2.979075e-03 -2.531699e-03 -4.831551e-02 11.2933 39.2725)" gradientUnits="userSpaceOnUse">
                    <stop offset="0" style="stop-color:#FED576" />
                    <stop offset="0.2634" style="stop-color:#F47133" />
                    <stop offset="0.6091" style="stop-color:#BC3081" />
                    <stop offset="1" style="stop-color:#4C63D2" />
                </radialGradient>
            </defs>
            <path d="M4.8,0.7C3.9,1.1,3.1,1.6,2.4,2.4C1.6,3.1,1.1,3.9,0.7,4.8C0.4,5.7,0.2,6.7,0.1,8.2S0,10.2,0,14
            s0,4.3,0.1,5.8c0.1,1.5,0.3,2.5,0.6,3.4c0.4,0.9,0.8,1.7,1.6,2.5s1.6,1.3,2.5,1.6c0.9,0.3,1.9,0.6,3.4,0.6s2,0.1,5.8,0.1
            s4.3,0,5.8-0.1c1.5-0.1,2.5-0.3,3.4-0.6c0.9-0.4,1.7-0.8,2.5-1.6c0.8-0.8,1.3-1.6,1.6-2.5c0.3-0.9,0.6-1.9,0.6-3.4
            c0.1-1.5,0.1-2,0.1-5.8s0-4.3-0.1-5.8c-0.1-1.5-0.3-2.5-0.6-3.4c-0.4-0.9-0.8-1.7-1.6-2.5c-0.8-0.8-1.6-1.3-2.5-1.6
            c-0.9-0.3-1.9-0.6-3.4-0.6C18.3,0,17.8,0,14,0S9.7,0,8.2,0.1C6.7,0.1,5.7,0.4,4.8,0.7z M19.7,2.6c1.4,0.1,2.1,0.3,2.6,0.5
            c0.7,0.3,1.1,0.6,1.6,1c0.5,0.5,0.8,1,1,1.6c0.2,0.5,0.4,1.2,0.5,2.6c0.1,1.5,0.1,1.9,0.1,5.7s0,4.2-0.1,5.7
            c-0.1,1.4-0.3,2.1-0.5,2.6c-0.3,0.7-0.6,1.1-1,1.6s-1,0.8-1.6,1c-0.5,0.2-1.2,0.4-2.6,0.5c-1.5,0.1-1.9,0.1-5.7,0.1
            s-4.2,0-5.7-0.1c-1.4-0.1-2.1-0.3-2.6-0.5c-0.7-0.3-1.1-0.6-1.6-1c-0.5-0.5-0.8-1-1-1.6c-0.2-0.5-0.4-1.2-0.5-2.6
            c-0.1-1.5-0.1-1.9-0.1-5.7s0-4.2,0.1-5.7C2.7,7,2.9,6.2,3.1,5.7c0.3-0.7,0.6-1.1,1-1.6s1-0.8,1.6-1C6.2,2.9,7,2.7,8.3,2.6
            c1.5-0.1,1.9-0.1,5.7-0.1S18.2,2.5,19.7,2.6z" />


            <path d="M6.8,14c0,4,3.2,7.2,7.2,7.2
            s7.2-3.2,7.2-7.2S18,6.8,14,6.8S6.8,10,6.8,14z M18.7,14c0,2.6-2.1,4.7-4.7,4.7S9.3,16.6,9.3,14s2.1-4.7,4.7-4.7
            S18.7,11.4,18.7,14z" />

            <circle cx="21.5" cy="6.5" r="1.7" />
</svg>

</body>
</html>

pagespeed Article's

30 articles in total

The Ultimate Guide to Accelerated Mobile Pages: How AMP Improves Mobile and SEO Performance