Boost Mobile Icon Clarity with Fast SVG Export and Symbol Techniques

Background

On high‑resolution (retina) screens, H5 icons can appear blurry. SVG provides a resolution‑independent solution.

Advantages and disadvantages of SVG

Scalable without loss, clear display.

Good semantics.

Styleable and animatable with CSS.

Reduces HTTP requests.

Drawbacks: slower rendering than PNG, limited gradient support, Android 4.1+ compatibility, higher learning cost.

Common SVG usage patterns

img / object / embed tags Each icon is a separate SVG file, causing an extra request.

<img src="http://www.w3school.com.cn/svg/rect1.svg" width="300" />

Inline SVG Embed SVG markup directly in HTML to avoid extra requests, but HTML becomes bulky.

<svg width="100%" height="100%">
  <rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"></rect>
</svg>

SVG sprite (CSS background) Combine multiple icons into one SVG file and use CSS background positioning.

.icon-bg{display:inline-block;width:30px;height:30px;background:url(./res/svg-sprite-background.svg);background-size:100% 100%;}
.icon-facebook-logo{background-position:0 0;}
.icon-earth{background-position:0 -30px;}

SVG symbol + <use> Define symbols once (often hidden) and reference them where needed, allowing size and color changes with a single request.

<svg style="width:0;height:0;visibility:hidden;position:absolute;z-index:-1">
  <symbol viewBox="0 0 24 24" id="heart">
    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3,0,7c0,4,3,7,7,7c4.8,0,8.9-3.2,10.4-7.6c0.5-1.5,0.6-3.1,0.6-4.8z"/>
  </symbol>
</svg>
<svg><use xlink:href="#heart"/></svg>

Exporting SVG from design tools

Photoshop CC 2015+ and Adobe Illustrator can export SVG. Ensure the artwork fills the canvas to avoid alignment issues. Batch export can be performed via File → Generate → Image Resources after renaming layers with a .svg suffix.

Automating SVG symbol generation with Gulp

Install the gulp-svg-symbols plugin (requires Gulp): npm i gulp-svg-symbols --save Sample gulpfile.js:

'use strict';
const gulp = require('gulp');
const symbols = require('gulp-svg-symbols');

gulp.task('svg', () => {
  return gulp.src('./svg/**')
    .pipe(symbols())
    .pipe(gulp.dest('out/'));
});

Run gulp svg to generate svg-symbols.svg (and an optional CSS file).

Simple SVG Symbol visual tool

A lightweight desktop tool (named “svg tool”) can drag‑and‑drop a folder of single‑layer SVGs, automatically merge them into a symbol file and export svg-symbol.svg and svg-symbol.js. It provides normal and correction modes, warns about non‑integer viewBox sizes, and runs on macOS and Windows.

Download URLs:

mac: http://jdc.jd.com/svg/svgtoolfile/svgtool-1.0.0.dmg

win32: http://jdc.jd.com/svg/svgtoolfile/svgtool-win32-ia32.zip

win64: http://jdc.jd.com/svg/svgtoolfile/svgtool-win32-x64.zip

Reference snippets

Using an external SVG symbol file:

<svg>
  <use xlink:href="/asset/svg-symbols.svg#heart"></use>
</svg>

Injecting symbols via JavaScript:

var symbols = '<svg style="width:0;height:0;visibility:hidden;position:absolute;z-index:-1"><symbol viewBox="0 0 24 24" id="heart"><path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3,0,7c0,4,3,7,7,7c4.8,0,8.9-3.2,10.4-7.6c0.5-1.5,0.6-3.1,0.6-4.8z"/></symbol></svg>';
document.body.insertAdjacentHTML('afterbegin', symbols);

Project structure example

assets/
├── svg/          // exported SVG files
│   ├── icon1.svg
│   ├── icon2.svg
│   └── …
├── out/          // generated svg-symbols.svg
├── gulpfile.js
├── package.json
└── index.html

Installation commands

npm i gulp-svg-symbols --save

Running the Gulp task

gulp svg   // generates out/svg-symbols.svg