Http://ued.ctrip.com/blog/svg-icons-in-mobile-applications.html
On a mobile device, the retina screen often encounters an issue with unclear icons.
In order to solve this problem, we have the following methods
- Cut a twice or even 3 times times the size of the graph, and then use the CSS to zoom, so that although the problem of unclear icons, but also doubled the capacity, resulting in slow page loading, hybird package volume becomes larger.
- Using Iconfont, no matter what resolution you are, whether or not retina, no matter how you zoom in, it can guarantee that the icon will not appear any blur, a copy of the font file can be stored a lot of icons, call management very convenient. The capacity is very small because it is a vector. You can control the color shadow size with CSS. Can only be a monochrome icon.
- Using SVG, like Iconfont is a vector icon, with iconfont advantages, SVG icon can be a multi-color icon, volume than iconfont slightly larger.
Now let's talk about how to use the SVG icon
In web development, SVG is mainly used in the following ways:
- Use the IMG, object, embed tags to refer directly to SVG. The disadvantage of this approach is that it requires each icon to be saved separately as an SVG file, which is also requested separately, and an HTTP request is added.
- Inline SVG, which directly writes SVG to HTML, is straightforward and has a very good tunable. 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, you need to insert a large chunk of SVG code in the page is not suitable for handwriting, the icon reuse is also more troublesome.
- SVG Sprite. The sprite technique described here is, yes, similar to the sprite technique in CSS. Icon graphics are combined to display specific icons exactly when they are actually rendered. In fact, the underlying SVG sprite just changed the original bitmap to SVG.
- Use the Symbol,use element in SVG to make an icon. This method solves the disadvantages of the above three ways, a small amount of HTTP situation, the icon can be cached for easy reuse, integration and management is very simple
SVG Sysbol is the next class to be explained.
Let's look at a code example:
Each symbol element contains an icon, the integration of the icon, we just need to like the above code, the symbol element inside the ' plug in ' a single SVG icon path is allowed, because it is XML so the integration icon is very simple.
The reference icon is also as simple as the example below:
Using the use element, the symbol ID corresponding to the direct ' use ' can refer to the icon.
The above example SVG symbol is embedded inside the HTML. SVG symbol can also be saved as an SVG file, in which case we need to use the SVG address +id name for the corresponding icon:
Note: If SVG is placed on a CDN static server, you need to turn on Ajax cross-domain permissions.
SVG icon on the mobile side of the app "Go"
