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);
-
#smiHoveris 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>
Top comments (0)