Impossiblue

SVG in HTML and CSS

This article is not about pros and cons of scaleable vector graphics (SVG). They are well established and useful – sharp and crisp. It is just that I forget the details of how to implement them. So, to save myself the trouble of searching for the code time and again, this is my check list for different scenarios. And I nearly forgot: The SVG is the off-white X in there.

Inline

Thumbs up: One less server request.
Thumbs down: The image is not cached by the browser. The HTML code might become bloated and weird looking.

The HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="240 254 32 32"><polygon points="270 254 256 268 242 254 240 256 254 270 240 284 242 286 256 272 270 286 272 284 258 270 272 256" fill="#eef5df"/></svg>

The CSS:

svg { width: 32px; } /* 'height' is implicit */

External source

The HTML:

<img src="x.svg" alt="Some description">

The CSS:

img { width: 32px; } /* 'height' is implicit */

Inline source

General code:

<img src='data:image/svg+xml;utf8,<svg … > … </svg>'>

The HTML:

<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="240 254 32 32"><polygon points="270 254 256 268 242 254 240 256 254 270 240 284 242 286 256 272 270 286 272 284 258 270 272 256" fill="#eef5df"/></svg>' alt="Some description">

Note the alternating use of apostrophe (') and quotation mark (").

The CSS:

img { width: 32px; } /* 'height' is implicit */

Background image – External

The HTML:

<div></div>

The CSS:

div {
	width: 32px;
	height: 32px;
	background-image: url("x.svg");
	}

Background image – Inline

The HTML:

<div></div>

The CSS:

div {
	width: 32px;
	height: 32px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="240 254 32 32"><polygon points="270 254 256 268 242 254 240 256 254 270 240 284 242 286 256 272 270 286 272 284 258 270 272 256" fill="#eef5df"/></svg>');
	}

Strange: The following code (without the opening and ending apostrophes) did not work for me:

background-image: url(data:image/svg+xml;utf8,<svg … > … </svg>);

On hover

Fig. On non-touch screens, hover over the image to see a change of colour. Note that the whole area (32x32 px in this example) is responsive but that the pointer cursor (manually added in CSS) is only active when it touches the stroke of the vector graphic. For, say, a closing button, a background might be added for “consistent” behaviour. (And why not make it 44x44 px to live up to Apple’s recommendations for finger tapping.)

The HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="240 254 32 32"><polygon id="onHover" points="270 254 256 268 242 254 240 256 254 270 240 284 242 286 256 272 270 286 272 284 258 270 272 256" fill="#eef5df"/></svg>

Note the manually added id in the SVG description. (For repeated use, a class would substitute the id.)

The CSS:

svg { width: 32px; } /* 'height' is implicit */
svg:hover #onHover {
	fill: #475f14; /* SVG specific property */
	cursor: pointer;
	}

Always optimize

1. Code from e.g. Adobe Illustrator is bloated with unnecessary code. Get rid of the bulk using Peter Collingridge’s online SVG optimiser.

2. Fine-tune in a plain text editor.

3. Save with an svg suffix.