Editing Icons With SVG Sprites

[[Category:Web Development]]
== Overview ==

The goal is to create a single `.svg` file containing all the icons that will be used on a website.

== Creating the icons ==
[[file:Illustrator-svg-artboards.png|right|frame|Artboard titles are used for the exported svg filenames and for the object ids in the final svg file.]]
Save all the icons in a single Illustrator document. 

Each icon is in its own layer, and each icon is placed on its own artboard.

Ultimately the illustrator file name becomes a prefix for the icon object ids in the production svg file. So it's a good idea to keep the filename short, and to avoid spaces in the file name.

The artboard names are used in the exported SVG file names, which are in turn used as the object ids of the icons within the final production SVG. It's a good idea to avoid spaces in the artboard titles, and to keep them as short as possible.

== Exporting the SVG ==
[[File:Illustrator-svg-export.png|right|frame|SVG export options in Illustrator]]
* '''File''' > '''Export...''' > '''Export As...'''
** ''(It's possible that '''Export for Screens''' would be useful also. It hasn't been tested.''
** Select a location that is inside the web project, but separated from the production files, e.g. `/images/icons/src/`.
** '''Format:''' SVG (svg)
** '''Use Artboards:''' checked
*** With the '''Use Artboards''' option checked, separate `.svg` files are created for each artboard in the Illustrator file. The default is to export all the artboards in the Illustrator file. Enter the index of individual artboards in the '''Range''' field to selectively export icons. 
** The icon file names are the following format: `[IllustratorFileName]_[ArtboardName].svg` 
** Using `gulp-svgstore` to combine the SVG files, these file names are used as the object ids within the final SVG file. So spaces in artboard names are not a good idea. 
* '''SVG Options''' dialog
** '''Styling:''' Internal CSS
** '''Font:''' SVG
** '''Images:''' Preserve ''(presumably there are no embedded images)''
** '''Object IDs:''' Layer Names<br />''(This setting is important. These are the object ids that will be used to reference the individual icons in HTML.)'''
** '''Decimal:''' 4
** '''Minify:''' checked
** '''Responsive:''' checked

== Combining SVG files ==

=== Using `gulp` ===

Use the [https://github.com/w0rm/gulp-svgstore `gulp-svgstore` package]. Documentation on how to create a task can be found in the readme file.

Install with `npm install gulp-svgstore gulp-svgmin --save-dev`

<syntaxhighlight lang="javascript">
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var path = require('path');

gulp.task('svgstore', function () {
    return gulp
        .src('.images/icons/src/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(svgstore())
        .pipe(gulp.dest('./images/icons/'));
});
</syntaxhighlight>

Run `gulp svgstore` to create the production SVG file with all the icons merged into it. 

== Inlining SVG into HTML ==

CSS:

<syntaxhighlight lang="css">
.icon {
	display: inline-block;
	width: 50px;
	height: auto;
}
.icon-divider {
	width: 25px;
}
.icon-red {
	fill: red;
}
.icon-red:hover {
	fill: #ff6600;
}
</syntaxhighlight>

HTML:

<syntaxhighlight lang="html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="icon icon-red">
	<use xlink:href="<?=LOCAL_WEB_ROOT?>images/icons/icons.svg#icons_cart"></use>
</svg>
</syntaxhighlight>

* `#icons_cart` is the object id of the icon within the file to use. 
* `viewBox` attribute
** Arguments: `origin-x origin-y width height`
** Basically, the SVG graphic is cropped to this box, then it is scaled to fit the dimensions specified for its container (the `<svg>` element.) <ref>[https://sarasoueidan.com/blog/svg-coordinate-systems/ Understanding SVG Coordinate Systems and Transformations (Part 1)], Sara Soueidan</ref>
** Negative values can be specified for `origin-x` and `origin-y` which would have the effect of adding padding to the left or top of the SVG graphic.
** A value of 0 for `width` or `height` basically disables the display of the SVG graphic.
** Negative values are not allowed for `width` or `height`.

== Using SVG as background images ==

The fill color of inline SVG images can be specified inline. This is not true of SVG images passed to the CSS `url()` function. <ref>[https://css-tricks.com/using-svg/ Using SVG] - CSS Tricks</ref> Only paths to SVG files or SVG code itself can be passed to `url()`.

The fill color of SVG is specified with the `fill` attribute of the `svg` or `path` tags, for example:

<syntaxhighlight lang="xml">
<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" rx="10" ry="10" width="220" height="220" fill="#ff6600" />
</svg>
</syntaxhighlight>

In order to use the SVG code above as the background image of an element:

<syntaxhighlight lang="css">
.my-svg-bg-image-class {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20240%20240%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2210%22%20rx%3D%2210%22%20ry%3D%2210%22%20width%3D%22220%22%20height%3D%22220%22%20fill%3D%22%23ff6600%22%20%2F%3E%0A%3C%2Fsvg%3E%0A');
}
</syntaxhighlight>

So the URL is made up of two parts. First, `data:image/svg+xml;utf8,` followed by the SVG XML. 

The SVG code must be URL encoded with a tool like [https://www.urlencoder.org/ urlencoder.org], for example. So everything inside and including the `<svg>` tag to the closing `</svg>` tag. 

The SVG code for an existing SVG image can be obtained by dropping the SVG in a browser and then navigating to "view source".

The position, size, and repeating properties of the background image are controlled with the CSS properties `background-position`, `background-size`, and `background-repeat`. <ref>[https://developer.mozilla.org/en-US/docs/Web/CSS/background CSS background] - MDN Web Docs</ref>

See the CodePen [https://codepen.io/dbarchowsky/pen/MWQoVVR "SVG background image in CSS"] for a working example.

== Scaling SVG images ==

Use the `viewBox` attribute of the `<svg>` element to scale SVG icons.<ref>[https://css-tricks.com/scale-svg/ How To Scale SVG] - CSS Tricks<ref>

== Applying a hover effect ==

=== Goal ===

Change the color of an SVG image when the mouse hovers over it. 

If the hover action is applied directly to the image itself, the hover effect won't apply if the mouse is over any interior part of the image that is not filled in.

=== Solution ===

Set the hover action to the `<svg>` tag containing the image.

HTML

<syntaxhighlight lang="html">
<svg>
    <path d="M8.17,24.2852H93.8837a7.1429,7.1429,0,0,0,0-14.2857H8.17A7.1429,7.1429,0,0,0,8.17,24.2852ZM93.8837,38.5714H8.17a7.1429,7.1429"></path>
</svg>
</syntaxhighlight>

CSS

<syntaxhighlight lang="css">
svg:hover path {
    fill: blue;
}
</syntaxhighlight>

== Notes ==

=== See also ===

* [https://css-tricks.com/svg-properties-and-css/ SVG Properties and CSS] - CSS-Tricks
* [https://css-tricks.com/svg-sprites-use-better-icon-fonts/ Icon System with SVG Sprites], CSS-Tricks, March 2014
* [https://css-tricks.com/svg-fragment-identifiers-work/ How SVG Fragments Work], CSS-Tricks, Nov. 2014
* [https://sarasoueidan.com/blog/svg-coordinate-systems/ Understanding SVG Coordinate Systems and Transformations (Part 1)], Sara Soueidan, July 2014
* [https://www.svgviewer.dev/ SVGViewer]

=== References ===
<references />