Most efficient way to add inline SVG?

Question

I have a webpage with lots of SVG icons that will be in the HTML. Rather than include them as an IMG tag and possibly slow the page with those HTTP requests, I'm placing the SVG code like this:

<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#C5C2BD" fill-rule="nonzero" d="M4.5 3.435L1.286.22A...LOTS OF CODE HERE..."/></svg>

Note: where it says "lots of code here", there is a huge string of numbers/letters that make up the path for this SVG.

The issue this creates is it's very ugly when not easily maintainable in the HTML (to the point where my editor bogs own because these SVG strings are so long).

Is there a cleaner, simpler way to include these SVG icons in my HTML while still eliminating the extra HTTP requests?

Thanks for your time.

I see that you want a "clean" HTML code. But I don't think that 1000 lines of 30 characters are "cleaner" than 1 line with 30 000 characters. — Ivan Kuckir, Nov 29 '17 at 19:34
As you have lots of icons would it not be beneficial to use a service like [IcoMoon](https://icomoon.io/) that can serve icons as a font? Otherwise, messy HTML is not a major concern. — Andy G, Nov 29 '17 at 19:48
Is that "huge string of numbers/letters" one icon, or all the icons clobbed together? — ccprog, Nov 29 '17 at 20:02

score 1 · Answer 1 · answered Nov 30 '17 at 18:20

The most proven way is to collect all the icons SVG in one file - the sprite SVG

Creating a Sprite and connecting it to HTML

The action plan is as follows:

Creating a Sprite
Connecting it to HTML
Calling SVG images from the sprite
Styling icons

Creating a Sprite

The main task of the sprite is to be a repository for icons that before the call to a specific place HTML pages should be invisible.

To do this,the code for each icon is wrapped with <symbol id =" .. "> ... </ symbol> tags with a unique identifier, which will be followed by the <use>

Template Sprite:

<div id="container"> 
  <svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 126 126" >
  <symbol id="picasa">
        <path     d="M113.5 57.... 72.8z" /> 
  </symbol>

     <symbol id="wordpress"  viewBox="0 0 126 126"> 
       <path stroke ="black"  d="M113.5 57.7l-8.5-11.4 .. 86.1 62.9z"/>
     </symbol>

       <symbol id="twitter">
          <path d="M113.5 57.6l-8.5-11.4.... 7.4-2.4V85.4z"/>
       </symbol>
  <symbol id="apple">
     <path d="M113.5 57.7l-8.5-11.4... 78.5 78.7 82z"/>
  </symbol>
</div>

As you can see, all <path> attributes are removed for later styling of icons from an external CSS file.

Adding a sprite file to HTML

There are several ways to add SVG files to HTML, but the most reliable way is to add it using the <object>

<object type="image/svg+xml" data="Sprite.svg" width="200" height="200">
  Your browser does not support SVG
</object>

Adding icons from the sprite

<div id="container"> 
     <svg  viewBox="0 0 126 126" >
        <use xlink:href="#apple"></use>  
   </svg>
</div>

The viewBox attributes should be like thesvg icon or change the scaling inside HTML if necessary.

Icons as links

For this, in SVG, unlike HTML, its own form of record

<svg viewBox="0 0 126 126" >
     <a xlink:href="https://www.apple.com/ru/"><use                          xlink:href="#apple"></use></a>  
</svg>

Styling icons

When using the <use> command, the icon falls into the shadow DOM and its attributes behave strangely, - there is an icon of the icon, but it can not be controlled from the outside.

In addition, the icon attributes for example: style = "fill: gray; stroke: crimson;" have the highest priority. Therefore, we deleted these attributes. see the example of the sprite above.

To solve the problem of inheritance of parental properties by objects in shadow DOM, you must use forced inheritance

svg path{
fill:inherit;
 stroke:inherit;
 }

and then to the icons you can already apply CSS rules from the external table

svg path:hover{fill:yellow;}

   #picasa{fill:black;}  
   #apple{fill:purple;}
   #twitter{fill:black;}        
   #wordpress{fill:blue;}

If you go for the first time along this path, then inevitably there will be many questions.
Ask, do not be shy.

All sooner or later it turned out to be done and customized sprite.
The main recommendation is to do everything yourself manually for the first time, to understand how it is arranged, and then you can already openly use special utilities to automatically create sprites.

score 0 · Answer 2 · answered Nov 29 '17 at 19:58

0

You should convert all your .svg files to one font file, here is how:

How to convert .svg files to a font?

answered Nov 29 '17 at 19:58

Bartosz Bielawski

21
4

Most efficient way to add inline SVG?

2 Answers2

Creating a Sprite and connecting it to HTML