HD Icon SVG solution

In the previous article, we talked about the font rendering mechanism and the causes of Iconfont aliasing, and how to draw high-quality SVG ICON, and provide a set of AI templates for your reference.

The following will tell the front-end side how we use SVG to make high-definition iocn, and good support for the individual browser under the PC, and compatible with more than ie6+ browser.

From the previous article we learned that SVG made icons in the Ie9+ browser rendering effect is quite poor, so under IE we do not use SVG icon, we can convert SVG into a PNG image to replace. First of all, to simply popularize the SVG icon several ways to use:

The first type of inline SVG

This method is to directly write the SVG tags into the HTML, directly by modifying the fill and stroke properties to control the color and border colors, but the disadvantage is that the maintenance is not good, if a page icon is very much, you may want to write dozens of SVG in the page, poor reusability, late extensibility is also poor.

123	<svgwidth="74"height="74" viewBox="0 0 74 74">    <pathfill="#444444"d="M25.42 27.737v-11.555c0-6.382 5.174-11.555 11.555-11.555s11.555 5.174 11.555 11.555v11.555h4.622v-11.555c0-8.935-7.243-16.178-16.178-16.178s-16.178 7.243-16.178 16.178v11.555h4.622z"></path></svg>

The second type of img/object tag

This method directly saves the SVG icon as a single file, referenced by an IMG or an OBJECT tag, and his disadvantage is that the number of requests increases, each icon is loaded on its own, the server load and page loading is not good.

1	<imgsrc="svg/16-16.svg" alt="test icon"/>

The third type of background and Data URIs

In the previous article, I had a way to invoke the background SVG file by calling it:

123	.icon{backgound-image: url(test.svg)}

And if you use background to refer to SVG as well as the first scenario, the number of requests is increased, so many people use Base64 encoding to reduce HTTP requests:

123	.icon{   background: url(data:text/svg+xml;base64,)}

However, it is not recommended to use Base64 encoding, regardless of performance and maintenance is not particularly good, remember to read a test Base64 performance of the article, Base64 on the mobile side rendering time than the normal use of the URL rendering time is 6 times times slower.

The fourth type of SVG Sprites

Currently there are many websites that offer icon font production, for example: Icomoon not only open source, but also powerful, can provide the function of output SVG sprites, SVG sprites its use is the same as PNG sprites, the multiple SVG The icon is merged into an SVG file and then positioned via Background-position, which solves the problem of increasing the number of requests.

12345678

.icon{    width: 16px;    height: 16px;    display: inline-block;    background-repeat: no-repeat;    background-image: url(sprite.svg);     background-position: 00;}

Of course, if you don't like using Icomoon, you can also use an automated tool to generate SVG sprites for example: Gulp-svgstore, GRUNT-ICONIZR, gulp-svg-sprites

The fifth type of SVG defs/symbols

This is actually in the SVG sprites above the use of further, SVG sprites is need to go through coordinates to get the corresponding location icon, but the SVG defs/symbols is simpler, directly by giving each SVG icon to define the ID, Call the corresponding ID directly:

12345678

<svgxmlns="http://www.w3.org/2000/svg">    <symbolid="icon1" viewBox="0 0 32 32">        <pathfill="#444444"d="M3 3h1v12h-1v-12z"></path>    </symbol>    <symbolid="icon2"viewBox="0 0 32 32">        <path fill="#444444"d="M3 14h10v1h-10v-1z"></path>    </symbol></svg>

After saving the above code as an SVG file, in HTML we can call directly in the following way:

123456

<svgclass="icon1">    <usexlink:href="/svg/symbol.svg#icon1"></use></svg><svgclass="icon2">    <usexlink:href="/svg/symbol.svg#icon2"></use></svg>

New scenario: SVG Sprites +png Sprites + image-set

Since we know the compatibility of SVG under IE is not good, so in the HD icon adaptation in the fourth scenario based on the optimization, first use Icomoon to do the following steps:

The first step is to convert the icons made from AI templates into SVG files and import them into Icomoon:

Step Two:

The third step, set the class name, icon spacing, color, and so on before exporting the file, and then download the compressed package:

Fourth step, just get the contents of the folder we need:

Fifth, fine-tune the icomoon generated style sprite.css to fit all PC browsers and retina browsers:

The final effect:

CSS4 Image-set

Someone here should think that you can also use media queries to do judgment processing in retinal to load SVG Sprites, but in fact image-set it and media queries some, it does not need to tell the browser what image to use, Instead, the image is provided directly so that the browser chooses to load the appropriate image itself. The compatibility aspect began to support this attribute at Safari6.1 start and Chrome21.

Summarize

SVG is still a lot of problems, the use of IE in Windows compatibility and rendering is too poor, in the PC-side test we can not use the full amount, so we could use the above solution to solve all the browser under the PC compatibility problem, under the retina, regardless of device = 2 or 3 are compatible, regardless of whether there will be a higher devicepixelratio out, according to the above methods are perfectly compatible, and in the corresponding different Devicepixelratio browser will automatically choose to load SVG or PNG, not both are loaded at the same time.

The reason why the previous article in the Firefox icon problem that piece of talk for a long time, and throw more rigorous icon making method of the main reason this program needs to convert the merged SVG sprites into a PNG sprite picture, if the SVG icon does have a problem, the resulting picture also appears hollow situation, Everyone look at my last, under the PC under all browsing, the middle of the lock icon although it is used to generate the picture but still hollow and Firefox under the problem of the effect is the same.

HD Icon SVG solution