New Trends in web design: Using SVG instead of Web Icon Font

If you're still using icon Font as an implementation of the display icon in your Web page, you might be a little out of it. Since there are some drawbacks to using icon Font display icons, developers have been working to explore the use of SVG as an alternative. This article lists the most common uses of SVG in the present way.

With regard to the flaw in the use of icon font, the "Inline SVG vs. Icon font" from CSS Trick is a fairly comprehensive summary. In my opinion, the main defects of Icon Font are the following:

1. The browser treats it as text for anti-aliasing optimization, and sometimes the effect is not as sharp as it might be. In particular, there are different algorithms for anti-aliasing of text in different systems, which may result in different display effects.
2. Icon Font as a font, the size and position of the icon display may be font-size affected by, and line-height word-spacing so on, CSS properties. The CSS style of the icon's container may have an impact on the position of the icon, which is inconvenient to adjust.
3. There is an inconvenience in use. First, loading an icon Font with hundreds of icons, but using only a few of them, is a waste of load time. It is also inconvenient to make your own icon font and integrate the icons used in multiple icon font into a single font.
4. For maximum browser support, you may want to provide at least four different types of font files. Includes TTF , WOFF ,, EOT and a font defined using the SVG format.

Developers have come up with a variety of techniques to use SVG to solve/mitigate the above problems, let's take a count of the current common use methods.

Img/object Label

Using the IMG and object tags to directly reference SVG is an early and common way to use it. The disadvantage of this approach is that it requires each icon to be saved separately as an SVG file, which is also requested separately. If you use multiple icons in a page, each of which is a separate request, it will generate a lot of requests, increase the load on the server and slow down the load on the page, so it is seldom used now.

However, the object tag can be used in IE to achieve the effect of the SVG Defs/symbols discussed in the last discussion.

Inline SVG

The so-called Inline svg, which directly writes SVG to HTML, is straightforward and has the strongest tunable. With this approach, you can use CSS fill properties and stroke properties to control the color of the fill color and edges, and you can even set the style for each part if the SVG icon contains multiple parts. At the same time, using JavaScript to modify SVG and generate animation effects can be achieved.

Inline SVG, as part of an HTML document, does not require a separate request. It is also convenient to temporarily modify the shape of an icon. However, the use of Inline svg is cumbersome, it is necessary to insert a large chunk of SVG code in the page is not suitable for handwriting, and the reuse of the icon is more troublesome.

Fortunately, most of our pages are rendered by some kind of template, whether using PHP, Jinja2 or ERuby template language, you can define a function to help us include these SVG. So in many cases it is a good solution, and the main usage scenarios that are not suitable are purely static pages or separate client pages from the front and back ends.

Data URIs

Data URIs is a less common technique. Before we defined the background image of the element in CSS, we often used the following way

1234	{ backgound-image:/* ... */}

Now, you can url place more than just a URL link to a resource, but it can be the data itself. With Data URIs, whether it's a picture or SVG, you can encode it as base64 and write it directly to CSS. Such as

123	. Icon{ background:URL (data:text/svg+xml;base64,<base64 encoded data>)}

For Base64 encoding, please refer to the format definition of Wiki,data URI as follows

1	Data:[<mime type>][;charset=<charset>][;base64],<encoded data>

With this approach, SVG icon uses just as much CSS as the Icon Font, and all the resources can be consolidated in a single CSS file without the need for an additional reference to the SVG file. If you're using Build tools like Gulp or Grunt, it's easy to automate the integration of SVG into one CSS. This task has a simple string and encoding process, and basically does not need to rely on non-JavaScript libraries and resources.

The disadvantage of using this approach is that it is not easy to use CSS to modify the Icon's color and edge properties.

SVG Sprite

Currently, some websites that provide the Icon Font functionality, such as Icomoon, have already provided output SVG Sprites functionality. The SVG Sprites can be seen as a combination of the above Data URIs method and the Sprite method used before the bitmap.

The front-end engineers use sprites to reduce the number of picture requests when the icon Font is not yet popular, and the icons are mostly based on bitmaps. The principle is simple: all the icons are arranged in a certain interval to form an entire large picture, when used for an icon, write the following CSS as shown.

123456

.icon-a {background-image: url (/path/to/pic/contains/all/icons.png); background-position: 0 120px !important; width: 24PX; height: 24px;}

The CSS above is set to adjust the displacement of the background-position large picture in the background, exposing only one of the individual icons and cutting off the rest. For all the icons are written in such a CSS can be used. The underlying SVG Sprite actually just converts the original bitmap to SVG.

One of the advantages of SVG sprite compared to the original bitmap sprite is that the Icon display can be resized via CSS. The Sprite of the bitmap can also be Fallback when used, so it has excellent browser compatibility. However, as with the Data URIs method, it also has the problem of not being able to adjust color styles easily.

Currently, the tools for generating SVG Sprites are GRUNT-ICONIZR, gulp-svg-sprites and so on. Using these two tools, you can automatically compose sprites and output the corresponding CSS by simply placing the SVG in a folder. All two tools support the generation of PNG-formatted bitmaps as Fallback, with the disadvantage of generating bitmaps to rely on PHANTOMJS, the heavyweight JS library.

SVG Defs/symbols

SVG Defs and Symbols are similar in principle, here the emphasis on the use of SVG Symbols, SVG defs/symbols is essentially a further optimization of the Sprite. Before, we need to use relative position to control which icon is displayed, but in fact the definition of SVG itself allows you to refer directly to some part of SVG in a certain way.

When multiple icons are integrated into one SVG, they are followed by the following Symbols

1234567891011121314

<Svgxmlns="Http://www.w3.org/2000/svg"style="Display:none;" ><SymbolId="Circle-cross"viewbox="0 0" ><Title>circle-cross icon</Title><PathD="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1. 161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3 .828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0. 948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0.552-. 396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-. 385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z "/></Symbol><SymbolId="Circle-check"viewbox="0 0" ><Title>circle-check icon</title> <path d=" M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.67 7-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4. 661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0. 943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-. 552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z "/> </symbol> <!--....--></svg

Each Symbol sets an ID as the name of the reference. There are two ways to use the ID to refer to the Icon in this SVG.

First, insert the above SVG as the first element of the body in HTML (there is a bug in Chrome that doesn't show the image here), and then insert the following code where you need to display an Icon:

123	<class="icon" > <xlink:href="#circle-cross" ></use> </svg>

The use tag here directly uses #circle-cross this ID to refer to the icon in SVG. Browser compatibility is better in this way.

I prefer the second approach, which does not need to insert SVG at the beginning of the body, but instead uses the full path to refer to Icon. That is

123456

<svg class=" icon "> < use xlink:href=/img/posts/svg-icons.svg# Circle-check "></use></ Svg><svg class= "icon" > <use xlink:href= "/img/ Posts/svg-icons.svg#circle-cross "></use></ SVG>

The effect shown is the following (you can use the browser's Debug tool to view the following code).

imgthere is no big difference between using the tag and the label in this way. The advantage is that all the icons are in one file, so they are only requested once. This does not need to be as tedious as a Sprite to set the displacement of the picture. Using the ID name icon and using the ID reference directly is both intuitive and straightforward. Its flexibility is almost the same as Inline SVG-you can set color, edge style, size, and so on. Depending on the browser, sometimes you need to use the start as an SVG tag.

1	<xmlns="Http://www.w3.org/2000/svg" >

For IE, you need to use object tags instead <svg><use> . See this article for a compatibility discussion.

In addition to some of the previous Gulp and Grunt plugins that already support SVG Defs/symbols, a lighter Gulp plugin Gulp-svg-symbols is recommended here. If you use only SVG Symbols without Sprite support, then using Gulp-svg-symbols can eliminate the dependency on PHANTOMJS.

Conclusion

As an alternative to Icon Font, SVG Icons has many advantages, such as good flexibility, good display effect and strong controllability. In particular, the last introduction of the SVG defs/symbols this way, has made SVG Icon a practical solution.

Browser compatibility is a permanent topic in the front-end domain, and currently the support for SVG is really not as good as a Web Font, where the mainstream mobile browser (Safari, Chrome, IE for Windows Phone) is basically compatible with SVG, but the desktop realm still However, there are also differences in support for SVG Defs/symbols in the face of browsers below IE8.

At this stage, if the browser compatibility requirements are more stringent (mainly support ie6-8), you can weigh the Icon Font and the SVG Sprite with Fallback. Otherwise, it is recommended to use the SVG defs/symbols instead of the Icon Font.

The individual believes that SVG Icons has the universal condition.

New Trends in web design: Using SVG instead of Web Icon Font