SVG

Tools:

Good to know:

Presentation attributes will overwrite inherited styles specified on a parent element
Links inside an SVG embedded as an <object> will open inside the boundaries of that <object>
Certain CSS characters like brackets will cause an XML error when used inside an SVG file

Accessibility

Only img, iframe and object can provide alternative content. img only provide text alternative (via the alt attribute)

Making SVG accessible
demosthenes.info – Making SVG Accessible
Using ARIA to enhance SVG accessibility | TPG – The Accessibility Experts
http://www.sitepoint.com/tips-accessible-svg/
https://github.com/SVG-access-W3CG
Making composed-tree.svg more accessible
Accessible SVGs | CSS-Tricks
Managing focus in SVG - ally.js
Heating ice - See SVG Heating ice - accessibility notes and 'Chaals' Nevile sur Twitter : "Using SVG animation and aria-live to make an accessible interactive STEM demo: https://t.co/UxEaZE4lgQ with notes at https://t.co/pFi3XzRSiL"
highchart screenreaders chart - offline version
7 solutions for creating more accessible SVGs » Simply Accessible

Restrictions

SVG Embed Technique

External resources (styles, images)

Scripts

Interactivity (links, etc.)

CSS Animations

CSS Inheritance

<svg> … </svg> (inlined)

Yes

<svg><use xlink:href="#id"></svg>

Yes

<svg><use xlink:href="image.svg#id"></svg>

Yes

Yes? (look like it's not the case)

Yes

<object type="image/svg+xml" data="image.svg"></object>

Yes

Yes, only inlined

<embed type="image/svg+xml" src="image.svg">

Yes

Yes, only inlined

<iframe src="image.svg"></iframe>

Yes

Yes, only inlined

<img src="img.svg" alt="">

Yes, only inlined?

element::before{content: url(img.svg);}

Yes, only inlined?

background-image: url(image.svg);

Yes, only inlined?

TODO test CSS Animations for "SVG as an Image" aka "SVG img src", SMIL animations (apprears to works at least with Safari)

~~When used as an image: iframe doesn't work (no data URI, no srcdoc)~~ (don't know what I wanted to say there)

Basically when using a foreign object tag [in fact elements inside SVG as an Image] all its content must be origin free

SVG as an Image - SVG | MDN
SVG use with External Reference, Take 2 | CSS-Tricks
LayoutTests/http/tests/security/svg-imge-with-url-data-image.html and LayoutTests/http/tests/security/resources/image-with-url-data-image.svg
141261 – SVG animation is slow only when the SVG is the background of the <body>

Related bugs:

Fragment identifier and SVG stack

<img src="sprite.svg#instagram-icon" alt="Instagram icon">

<svg>
	<view id="instagram-icon" viewBox="64 0 32 32" />
</svg>

An Overview of SVG Sprite Creation Techniques ◆ 24 ways
https://bugs.webkit.org/show_bug.cgi?id=91790
https://code.google.com/p/chromium/issues/detail?id=128055
How to Use SVG Image Sprites
http://dev.w3.org/csswg/css-images/#image-notation
http://caniuse.com/#feat=svg-fragment
How SVG Fragment Identifiers Work | CSS-Tricks

SVG symbols

Aka icon

The viewBox can be defined on the symbol, so you don't need to use it in the markup (easier and less error prone).
title and desc tags can be added within the <symbol> and they kinda "come along for the ride" when the symbol gets used, making accessibility easier to do right.
Symbols don't display as you define them, so no need for a <defs> block.
This is probably what <symbol> was invented for anyway

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="symbol-1" viewBox="214.7 0 182.6 792">
  	<title>symbol's-title</title>
    <desc>symbol's-desc</desc>
    <!-- <path>s and whatever other shapes in here -->
  </symbol>
  <symbol id="symbol-2" viewBox="0 26 100 48">
  	<title>symbol's-title</title>
    <desc>symbol's-desc</desc>
    <!-- <path>s and whatever other shapes in here -->
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#symbol-1" />
</svg>

Path

SVG Path

Relative ↔︎ Absolute path

Utility: Convert SVG path to all-relative or all-absolute commands | Lea Verou
https://stackoverflow.com/questions/14179333/convert-svg-path-to-relative-commands/14179367#14179367
https://stackoverflow.com/questions/9677885/convert-svg-path-to-absolute-commands/9677915#9677915
https://github.com/DmitryBaranovskiy/raphael/blob/bef7f6b0e259030138193d42f2c74b754c292f3e/dev/raphael.core.js#L1646

Path Data API

SVGPathSeg, getPathData() and setPathData()

Primitives to path

See MorphSVGPlugin.convertToPath (require to be Club GreenSock membership)

Polyline to path: <polygon points="x1,y1 x2,y2 x3,y3"/> as <path d="Mx1,y1 x2,y2 x3,y3Z"/>

<!--
http://codepen.io/niorad/pen/xmfza
Convert SVG-Shapes into paths so they can be animated.
The script converts all non-path-elements to paths so the stroke-dashoffset-trick works.
Note: this doesn't implement all syntaxes allowed by SVG specs
-->

<script>
	//inspired by http://product.voxmedia.com/post/68085482982/polygon-feature-design-svg-animations-for-fun-and

	//If you want to add SVG to the DOM, jQuery won't do
	//http://www.benknowscode.com/2012/09/using-svg-elements-with-jquery_6812.html

	function SVG(tag) {
	    return document.createElementNS('http://www.w3.org/2000/svg', tag);
	}

	function replaceRectsWithPaths(parentElement) {
	    var rects = $(parentElement).find('rect');

	    $.each(rects, function() {
	        var rectX = $(this).attr('x');
	        var rectY = $(this).attr('y');

	        var rectX2 = parseFloat(rectX) + parseFloat($(this).attr('width'));
	        var rectY2 = parseFloat(rectY) + parseFloat($(this).attr('height'));

	        var convertedPath = 'M' + rectX + ',' + rectY + ' ' + rectX2 + ',' + rectY + ' ' + rectX2 + ',' + rectY2 + ' ' + rectX + ',' + rectY2 + ' ' + rectX + ',' + rectY;

	        $(SVG('path'))
	        .attr('d', convertedPath)
	        .attr('fill', $(this).attr('fill'))
	        .attr('stroke', $(this).attr('stroke'))
	        .attr('stroke-width', $(this).attr('stroke-width'))
	        .insertAfter(this);
	    });

	    $(rects).remove();
	}

	function replaceLinesWithPaths(parentElement) {
	    var lines = $(parentElement).find('line');

	    $.each(lines, function() {
	        var lineX1 = $(this).attr('x1');
	        var lineY1 = $(this).attr('y1');

	        var lineX2 = $(this).attr('x2');
	        var lineY2 = $(this).attr('y2');

	        var convertedPath = 'M' + lineX1 + ',' + lineY1 + ' ' + lineX2 + ',' + lineY2;

	        $(SVG('path'))
	        .attr('d', convertedPath)
	        .attr('fill', $(this).attr('fill'))
	        .attr('stroke', $(this).attr('stroke'))
	        .attr('stroke-width', $(this).attr('stroke-width'))
	        .insertAfter(this);
	    });

	    $(lines).remove();
	}

	function replaceCirclesWithPaths(parentElement) {
	    var circles = $(parentElement).find('circle');

	    $.each(circles, function() {
	        var cX = $(this).attr('cx');
	        var cY = $(this).attr('cy');
	        var r = $(this).attr('r');
	        var r2 = parseFloat(r * 2);

	        var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-r) + ', 0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + r2 + ',0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + (-r2) + ',0 ';

	        $(SVG('path'))
	        .attr('d', convertedPath)
	        .attr('fill', $(this).attr('fill'))
	        .attr('stroke', $(this).attr('stroke'))
	        .attr('stroke-width', $(this).attr('stroke-width'))
	        .insertAfter(this);
	    });

	    $(circles).remove();
	}

	function replaceEllipsesWithPaths(parentElement) {
	    var ellipses = $(parentElement).find('ellipse');

	    $.each(ellipses, function() {
	        var cX = $(this).attr('cx');
	        var cY = $(this).attr('cy');
	        var rX = $(this).attr('rx');
	        var rY = $(this).attr('ry');

	        var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-rX) + ', 0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + rX*2 + ',0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + (-rX*2) + ',0 ';

	        $(SVG('path'))
	        .attr('d', convertedPath)
	        .attr('fill', $(this).attr('fill'))
	        .attr('stroke', $(this).attr('stroke'))
	        .attr('stroke-width', $(this).attr('stroke-width'))
	        .insertAfter(this);
	    });

	    $(ellipses).remove();
	}

	function replacePolygonsWithPaths(parentElement) {
	    var polygons = $(parentElement).find('polygon');

		// https://www.w3.org/TR/SVG/shapes.html#PointsBNF
	    $.each(polygons, function() {
	        var points = $(this).attr('points');
	        var polyPoints = points.split(/[ ,]+/);
	        var endPoint = polyPoints[0] + ', ' + polyPoints[1];

	        $(SVG('path'))
	        .attr('d', 'M' + points + ' ' + endPoint)
	        .attr('fill', $(this).attr('fill'))
	        .attr('stroke', $(this).attr('stroke'))
	        .attr('stroke-width', $(this).attr('stroke-width'))
	        .insertAfter(this);
	    });

	    $(polygons).remove();
	}

	function replacePolylinesWithPaths(parentElement) {
	    var polylines = $(parentElement).find('polyline');

	    $.each(polylines, function() {
	        var points = $(this).attr('points');

	        $(SVG('path'))
	        .attr('d', 'M' + points)
	        .attr('fill', $(this).attr('fill'))
	        .attr('stroke', $(this).attr('stroke'))
	        .attr('stroke-width', $(this).attr('stroke-width'))
	        .insertAfter(this);
	    });

	    $(polylines).remove();
	}

	function hideSVGPaths(parentElement) {
	    var paths = $(parentElement).find('path');

	    //for each PATH..
	    $.each( paths, function() {
	        //get the total length
	        var totalLength = this.getTotalLength();

	        //set PATHs to invisible
	        $(this).css({
	            'stroke-dashoffset': totalLength,
	            'stroke-dasharray': totalLength + ' ' + totalLength
	        });
	    });
	}

	function drawSVGPaths(_parentElement, _timeMin, _timeMax, _timeDelay) {
	    var paths = $(_parentElement).find('path');

	    //for each PATH..
	    $.each( paths, function(i) {
	        //get the total length
	        var totalLength = this.getTotalLength();

	        //set PATHs to invisible
	        $(this).css({
	            'stroke-dashoffset': totalLength,
	            'stroke-dasharray': totalLength + ' ' + totalLength
	        });

	        //animate
	        $(this).delay(_timeDelay*i).animate({
	            'stroke-dashoffset': 0
	        }, {
	            duration: Math.floor(Math.random() * _timeMax) + _timeMin
	            ,easing: 'easeInOutQuad'
	        });
	    });
	}

	function replaceWithPaths(parentElement) {
	    replaceRectsWithPaths(parentElement);
	    replaceLinesWithPaths(parentElement);
	    replaceEllipsesWithPaths(parentElement);
	    replaceCirclesWithPaths(parentElement);
	    replacePolygonsWithPaths(parentElement);
	    replacePolylinesWithPaths(parentElement);
	}

	function startSVGAnimation(parentElement) {
	    drawSVGPaths(parentElement, 1000, 2000, 50);
	}

	replaceWithPaths($('svg'));
	startSVGAnimation($('svg'));
</script>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
<circle fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="115.5" cy="119.5" r="55.5"/>
<ellipse fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="284" cy="123" rx="69" ry="23"/>
<rect x="403" y="71" fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" width="98" height="97"/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M672,158c0,5.523-4.477,10-10,10h-82
    c-5.523,0-10-4.477-10-10V81c0-5.523,4.477-10,10-10h82c5.523,0,10,4.477,10,10V158z"/>
<polyline fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="66,292 115.5,239 171,321 194,251
    236,280 268,251 318,291 343,239 368,275 "/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M452,293c0,0,0-61,72-44c0,0-47,117,81,57
    s5-110,10-67s-51,77.979-50,33.989"/>
</svg>

Transform

Transforms on SVG Elements | CSS-Tricks

`transform-origin` in SVG not the same as HTML

Default values:

HTML: center, center
SVG: 0, 0

Transform on Firefox

transform-origin: 50% 50% is not supported in Firefox. Use translate(-halfWpx -halfHpx) ... translate(halfWpx halfHpx) or transform-origin: 200px 200px instead

Animation

SMIL animation in SVG are powerfull, but hard to control. Prefer use CSS animation/transition but it is not supported in IE -11+. A pure JS fallback is the solution.

http://jakearchibald.com/2013/animated-line-drawing-svg/

Animation as a huge impact on performance, especially on mobile. Rasterization is the problem. May be use canvas instead.

[SVG is] perfect for mobile… as long as it doesn’t move. There is no way to animate it smoothly on Android - rasterization won’t give you a chance.

https://github.com/kdzwinel/progress-bar-animation
https://github.com/kdzwinel/progress-bar-animation/issues/1

SMIL

Can't make multiple transform in the same time. Don't have an equivalent of transform-orign (it's the fault of SVG transform)

<!-- Animate element's translate -->
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="589 122" to="580 -57" dur="250ms" fill="freeze" calcMode="spline" keySplines="0.43 0 0 1"/>
<!-- Animate opacity -->
<animate class="target" attributeName="opacity" attributeType="XML" from="1" to="0" dur="250ms" fill="freeze" calcMode="spline" keySplines="0.43 0 0 1"/>

Control it with JS: Add begin="indefinite" to animate* element, and element.beginElement() or element.endElement() (and few others methods) to control it.

http://leunen.me/fakesmile/index.html
http://css-tricks.com/guide-svg-animations-smil/
http://tutorials.jenkov.com/svg/svg-animation.html
http://oak.is/thinking/animated-svgs
http://apike.ca/prog_svg_smil.html
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

CSS

https://stackoverflow.com/questions/24302615/css3-animation-is-not-working

JS

TweenMax
http://codepen.io/GreenSock/full/gpDrC/
http://www.w3.org/TR/SVG/animate.html#DOMAnimationExample

Now (05/11/2014) there no lib that can animate SVG transform attribute.

Interpolation:

http://www.w3.org/TR/css3-transforms/#interpolation-of-transform-functions
http://www.w3.org/TR/css3-transforms/#transform-function-lists
https://wiki.csswg.org/topics/transform-interpolation
transform-origin: 200px 300px; transform: rotate(45deg); is equivalent to: transform: translate(200px 300px) rotate(45deg) translate(-200px -300px). Apply it to scale, rotate, `` (exist in SVG only for rotate: transform="rotate(45 200 300)" ). http://www.w3.org/TR/css3-transforms/#transformation-matrix-computation
https://stackoverflow.com/questions/19154631/how-to-get-coordinates-of-an-svg-element https://github.com/mbostock/d3/blob/48ad44fdeef32b518c6271bb99a9aed376c1a1d6/src/math/transform.js
http://greensock.com/forums/tags/forums/svg/
http://greensock.com/forums/topic/10666-svg-animations-in-ie/
http://greensock.com/forums/topic/10684-apply-transforms-with-transform-attr-instead-of-inline-style-on-svg/
http://greensock.com/forums/topic/10725-animating-svgs-fill-opacity/
http://greensock.com/forums/topic/7376-general-purpose-svg-plug-in/
https://github.com/akbr/GSAPSvgPlugin/blob/master/SvgPlugin.js
https://gist.github.com/raldred/7769278
http://www.benknowscode.com/2012/09/diving-into-matrices-with-css3_4970.html
http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined
https://github.com/jcoglan/sylvester

Stroke animation

Works only on path elements. See code below to do that.

stroke-dashoffset
can be used for pie chart (camembert) animation. Use large stroke-width of a <circle>. On IE use a value minus <1px (50px → 49.9px)
SVG-Stroke Animation
Animated line drawing in SVG - JakeArchibald.com
css - Animate Path in Internet Explorer - Stack Overflow
Three Illustrator tricks for better SVG stroke animations | Val Head - Web & UI animation expert

Stroke

Paths: Stroking and Offsetting | Tavmjong Bah's Blog

Pattern

An Overview of SVG Patterns : Adobe Dreamweaver Team Blog

Unit

stroke-width
stroke-dasharray
...

unit less (5) = viewBox percentage (5%) = viewport

DOM

Don't forget the SVG namespace:

var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttributeNS("http://www.w3.org/2000/svg", "style", "opacity: 0.5");
// Use the default NS
image.setAttributeNS(null, "style", "opacity: 0.5");
image.setAttribute("style", "opacity: 0.5");
image.setAttributeNS('http://www.w3.org/1999/xlink', "href", "");

Filter

Filter cropped, filter size

By default filter are <filter x="-10%" y="-10%" width="120%" height="120%">. If you want a bigger drop shadow, blur, etc. use <filter x="-30%" y="-30%" width="160%" height="160%">.

Filter

Clipping in CSS and SVG — The clip-path Property and <clipPath> Element

Use clip-path over alpha channel filter as mask

...when it's possible for better performances

Mask

Mask SVG qui disparaissent quand certain elements en contiennent ne sont plus affiché (visibility: hidden;, display: none;, removed)

`<use>` with external source

Not work properly on IE9-11+?

Optimizations

Don't remove xmlns="http://www.w3.org/2000/svg" if you not inline the SVG document in an HTML document.

element used once (<use xlink:href="#ID" />), replace replace it directly
remove useless id="ID" attribute (if not reference by xlink:ref="#ID", clip-path="url(#ID)", etc.)
same attributes (like fill, stroke, stroke-***, style, etc.) create a <g></g> wrapper with this attributes (will inherit attributes)
remove useless namespace (like: xmlns:xlink) if not used
remove whitespaces before and after value of d="", points=""
change color like #FFFFFF to it's named equivalent black...
simplify transform matrix matrix(1 0 0 1 $e $f) to translate($e $f), translate(...) rotate(...) scale(...)... to matrix(...)
remove subtle transforms ex: matrix(1 0 0 1 -1.220703e-04 -6.103516e-05)
remove on root <svg></svg> attributes like id, x, y, width, height, enabled-background, xml:space...
precompress (gzip) and use appropriate headers http://kaioa.com/node/45
reduce precision
<?xml version="1.0"?> can be omitted
xmlns:xlink="http://www.w3.org/1999/xlink" can be removed if not used
version="1.1" on svg node can be omitted
<linearGradient> inside <defs> not necessary
width and height when viewBox is defined on svg node are not required
stop-opacity on stop nodes are optional
stop-color="#ffffff" and stop-opacity="0" can be merged to stop-color="rgba(255,255,255,0)"
attribute quotes could be simple ones: attribute='value' instead of attribute="value"
Remove all uncessary whites spaces like new lines, tabs

Some tools already exist:

https://github.com/svg/svgo
https://code.google.com/p/svgmin/
https://petercollingridge.appspot.com/svg-editor
http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/
Common Pitfalls when Serving SVGs and How to Solve Them - José M. Pérez
Optimising SVGs for Web Use — Part 1 – Larsenwork – Medium
Optimising SVGs for Web Use — Part 2 – Larsenwork – Medium
Optimising SVGs for Web Use — Part 2½ – Larsenwork – Medium

Performances

Use HTML+CSS hardware acceleration (split SVG and wrap in HTML elements differents parts), Canvas (2D or WebGL) or just an still image (PNG) instead of SVG:

Goodbye, Layout Invalidation: Animating SVGs with CSS Transforms | Charlie Marsh
Maker here. I meant it as a way of saying good-bye to SVG as for the past years ... | Hacker News
Performance of canvas versus SVG | Boris Smus
Some well compressed PNG are smaller than the SVG version (often small icons) and the rendering time is the best by far
High Performance SVGs | CSS-Tricks
shape-rendering - SVG | MDN
Improving SVG Runtime Performance by Taylor Hunt on CodePen

Inlined or as separate document vs CSS background image (data URI or separate document) impact rendering time and memory usage:

Bug 108999 – SVG background-image memory usage is absurd
196524 - an svg background image eats up browser memory - chromium - Monorail
Bug 106159 – Remove the bitmap SVG image cache
Case Study: Tricky SVG Background Images | Targetprocess - Visual management software
Parashuram's blog: Icons - Font, Inline SVG or Background SVGs ?, https://docs.google.com/spreadsheets/d/1j8YnjlnBR1rFxZ89JYwrNRV2cXVaoCm-9BexErRj2Hs/edit#gid=1538311979 and https://github.com/web-perf/svg-perf-test

CSS animations applied on definition elements

CSS animations applied on elements used by use can be realy bad and not recommended.

Case sensitivity

Since SVG is XML, node's name are case sensitive. Be carefull when create element in XML stream or via DOM (createElement()).

http://ejohn.org/blog/nodename-case-sensitivity/

Gradient

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

Linear gradients can be defined as horizontal, vertical or angular gradients:
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
Angular gradients are created when x1 and x2 differ and y1 and y2 differ

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'>
	<linearGradient id='g' x1='0%' y1='0%' x2='100%' y2='0%'>
		<stop offset='0%' stop-color='rgba(255,255,255,0.5)'/>
		<stop offset='100%' stop-color='rgba(255,255,255,0.8)'/>
	</linearGradient>
	<rect fill='url(#g)' width='100' height='100'/>
</svg>

How To Apply SVG Linear Gradients To A Fill Or Stroke - Vanseo Design

Gardient — Left to right

<linearGradient id="g">

Gardient — Top to bottom

<linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">

Coordinates, position and viewport

If viewBox is not defined nor width and height, SVG dimentions will not scale Use viewBox instead of width, height, x and y.

Responsive

Adaptive image

http://w3.eleqtriq.com/2014/02/everything-is-relative-the-art-of-the-adaptive-image/
Four sliced scaling for SVG | eleqtriq
9 slice in SVG: The Holy Grail of Image Scaling | eleqtriq
http://css-tricks.com/scale-svg/

Scale bug on IE

http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/
http://benfrain.com/svg-backgrounds-dont-zoom-correctly-in-internet-explorer-10/

`preserveAspectRatio`

preserveAspectRatio="xMidYMid meet" (default, CSS equivalent background: center / contain) has no effect if viewBox is not set

Scaling:

keyword | CSS equivalent meet | background-size: contain slice | background-size: cover none | background-size: 100% 100% (stretching or squishing to fit the height and width)

For alignment (in conjuction with meet or slice), use 2 keywords concatenated (like xMinYMin):

Why and how preserveAspectRatio? by Taylor Hunt on CodePen - equivalent to background-position and background-size

Align text

<text text-anchor="middle" dy=".3em">Center aligned text</text>

Easily center text vertically, with SVG! | Lea Verou

Fallback

<svg>
	<switch>
		<use xlink:href="#icon-twitter"></use>
		<foreignObject>
			<div class="fallback icon-twitter-fallback"></div>
		</foreignObject>
	</switch>
</svg>
<style>
	.icon-twitter-fallback{
		background-image: url("icon-twitter.png");
	}
</style>

the logic is embedded inside the <svg> and use the <foreignObject> element to insert the non-SVG fallback. Using <switch>, SVG-capable browsers will render the first markup they understand (the SVG) and ignore the rest (the contents of the <foreignObject>). IE will do the opposite: it ignore the SVG it does not understand and renders the contents of the <foreignObject> because it is plain HTML.

SVG Fallbacks | CSS-Tricks
A Complete Guide to SVG Fallbacks | CSS-Tricks
Chapter 28: Using SVGs As An Icon Font Replacement (Or, How To Create SVG Sprites And Use Them As An Icon System) (page 335) - Mastering SVG For Responsive Web Design by Sara Soueidan
Smashing Book 5 Real-Life Responsive Web Design - Part 1 - Smashing Magazine | Typography | Web Page
Inline SVG Fallback

HTML Entities

// create a doctype that includes definitions for all HTML entities - http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
const HTML_ENTITIES = {
	"quot": 34,
	"amp": 38,
	"apos": 39,
	"lt": 60,
	"gt": 62,
	"nbsp": 160,
	"iexcl": 161,
	"cent": 162,
	"pound": 163,
	"curren": 164,
	"yen": 165,
	"brvbar": 166,
	"sect": 167,
	"uml": 168,
	"copy": 169,
	"ordf": 170,
	"laquo": 171,
	"not": 172,
	"shy": 173,
	"reg": 174,
	"macr": 175,
	"deg": 176,
	"plusmn": 177,
	"sup2": 178,
	"sup3": 179,
	"acute": 180,
	"micro": 181,
	"para": 182,
	"middot": 183,
	"cedil": 184,
	"sup1": 185,
	"ordm": 186,
	"raquo": 187,
	"frac14": 188,
	"frac12": 189,
	"frac34": 190,
	"iquest": 191,
	"Agrave": 192,
	"Aacute": 193,
	"Acirc": 194,
	"Atilde": 195,
	"Auml": 196,
	"Aring": 197,
	"AElig": 198,
	"Ccedil": 199,
	"Egrave": 200,
	"Eacute": 201,
	"Ecirc": 202,
	"Euml": 203,
	"Igrave": 204,
	"Iacute": 205,
	"Icirc": 206,
	"Iuml": 207,
	"ETH": 208,
	"Ntilde": 209,
	"Ograve": 210,
	"Oacute": 211,
	"Ocirc": 212,
	"Otilde": 213,
	"Ouml": 214,
	"times": 215,
	"Oslash": 216,
	"Ugrave": 217,
	"Uacute": 218,
	"Ucirc": 219,
	"Uuml": 220,
	"Yacute": 221,
	"THORN": 222,
	"szlig": 223,
	"agrave": 224,
	"aacute": 225,
	"acirc": 226,
	"atilde": 227,
	"auml": 228,
	"aring": 229,
	"aelig": 230,
	"ccedil": 231,
	"egrave": 232,
	"eacute": 233,
	"ecirc": 234,
	"euml": 235,
	"igrave": 236,
	"iacute": 237,
	"icirc": 238,
	"iuml": 239,
	"eth": 240,
	"ntilde": 241,
	"ograve": 242,
	"oacute": 243,
	"ocirc": 244,
	"otilde": 245,
	"ouml": 246,
	"divide": 247,
	"oslash": 248,
	"ugrave": 249,
	"uacute": 250,
	"ucirc": 251,
	"uuml": 252,
	"yacute": 253,
	"thorn": 254,
	"yuml": 255,
	"OElig": 338,
	"oelig": 339,
	"Scaron": 352,
	"scaron": 353,
	"Yuml": 376,
	"fnof": 402,
	"circ": 710,
	"tilde": 732,
	"Alpha": 913,
	"Beta": 914,
	"Gamma": 915,
	"Delta": 916,
	"Epsilon": 917,
	"Zeta": 918,
	"Eta": 919,
	"Theta": 920,
	"Iota": 921,
	"Kappa": 922,
	"Lambda": 923,
	"Mu": 924,
	"Nu": 925,
	"Xi": 926,
	"Omicron": 927,
	"Pi": 928,
	"Rho": 929,
	"Sigma": 931,
	"Tau": 932,
	"Upsilon": 933,
	"Phi": 934,
	"Chi": 935,
	"Psi": 936,
	"Omega": 937,
	"alpha": 945,
	"beta": 946,
	"gamma": 947,
	"delta": 948,
	"epsilon": 949,
	"zeta": 950,
	"eta": 951,
	"theta": 952,
	"iota": 953,
	"kappa": 954,
	"lambda": 955,
	"mu": 956,
	"nu": 957,
	"xi": 958,
	"omicron": 959,
	"pi": 960,
	"rho": 961,
	"sigmaf": 962,
	"sigma": 963,
	"tau": 964,
	"upsilon": 965,
	"phi": 966,
	"chi": 967,
	"psi": 968,
	"omega": 969,
	"thetasym": 977,
	"upsih": 978,
	"piv": 982,
	"ensp": 8194,
	"emsp": 8195,
	"thinsp": 8201,
	"zwnj": 8204,
	"zwj": 8205,
	"lrm": 8206,
	"rlm": 8207,
	"ndash": 8211,
	"mdash": 8212,
	"lsquo": 8216,
	"rsquo": 8217,
	"sbquo": 8218,
	"ldquo": 8220,
	"rdquo": 8221,
	"bdquo": 8222,
	"dagger": 8224,
	"Dagger": 8225,
	"bull": 8226,
	"hellip": 8230,
	"permil": 8240,
	"prime": 8242,
	"Prime": 8243,
	"lsaquo": 8249,
	"rsaquo": 8250,
	"oline": 8254,
	"frasl": 8260,
	"euro": 8364,
	"image": 8465,
	"weierp": 8472,
	"real": 8476,
	"trade": 8482,
	"alefsym": 8501,
	"larr": 8592,
	"uarr": 8593,
	"rarr": 8594,
	"darr": 8595,
	"harr": 8596,
	"crarr": 8629,
	"lArr": 8656,
	"uArr": 8657,
	"rArr": 8658,
	"dArr": 8659,
	"hArr": 8660,
	"forall": 8704,
	"part": 8706,
	"exist": 8707,
	"empty": 8709,
	"nabla": 8711,
	"isin": 8712,
	"notin": 8713,
	"ni": 8715,
	"prod": 8719,
	"sum": 8721,
	"minus": 8722,
	"lowast": 8727,
	"radic": 8730,
	"prop": 8733,
	"infin": 8734,
	"ang": 8736,
	"and": 8743,
	"or": 8744,
	"cap": 8745,
	"cup": 8746,
	"int": 8747,
	"there4": 8756,
	"sim": 8764,
	"cong": 8773,
	"asymp": 8776,
	"ne": 8800,
	"equiv": 8801,
	"le": 8804,
	"ge": 8805,
	"sub": 8834,
	"sup": 8835,
	"nsub": 8836,
	"sube": 8838,
	"supe": 8839,
	"oplus": 8853,
	"otimes": 8855,
	"perp": 8869,
	"sdot": 8901,
	"lceil": 8968,
	"rceil": 8969,
	"lfloor": 8970,
	"rfloor": 8971,
	"lang": 9001,
	"rang": 9002,
	"loz": 9674,
	"spades": 9824,
	"clubs": 9827,
	"hearts": 9829,
	"diams": 9830,
};

const SVG_DOCTYPE = `<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	${Object.entries(HTML_ENTITIES).map(([name, value]) => `<!ENTITY ${name} "&#${value};">`).join("\n\t")}
]>`;

Character entity references in HTML 4

Data attributes

<whatever xmlns:data="https://html.spec.whatwg.org/#attr-data-*"><!-- Ths XML namespace value can be anything -->
    <url data:post-type="quote">
        <loc>https://example.com/3</loc>
        <lastmod>1998-08-19</lastmod>
    </url>
</whatever>

Arbitrary data attributes in XML by Taylor Hunt on CodePen

Graphics Canvas

Aka WebGL

WebGL in SVG via foreignObject

Text to Path

mikolalysenko/vectorize-text: Turns a text string into a 2D poly line - Render with a browser canvas or Cairo (canvas), then detect edges
bubkoo/text2svg: 🍄 Convert text to svg path. - Use opentype.js
text-to-svg/src/index.js at master · shrhdk/text-to-svg - Use opentype.js
ksss/text2svg: Generate SVG data from text and font file - Use FreeType, written in Ruby. See svg_path_data and FT_Outline_Decompose
inkscape file_text.svg --export-text-to-path --export-plain-svg file_shapes.svg
kartsims/easysvg: Generate SVG definitions and XML using PHP - Render text path with SVG font, written in PHP
php - How to convert text to SVG paths? - Stack Overflow - Render text path with SVG font, written in PHP
danmarshall/google-font-to-svg-path: Create an SVG path from a Google font - Use maker.js (which use opentype.js), written in JS

SVG Font

SVG Font Converter - Batik ttf2svg
Text to SVG Paths with freetype and Python
FontForge scripting:
- native scripting: fontforge -lang ff -c 'Open($1); Generate($2)' font.otf font.svg
- pyton: fontforge -c 'open(argv[1]).generate(argv[2])' font.otf font.svg
- Scripting FontForge

PreviousRust Nexthtaccess

Last updated 11 days ago

Was this helpful?

Accessibility

Restrictions

Fragment identifier and SVG stack

SVG symbols

Path

Relative ↔︎ Absolute path

Path Data API

Primitives to path

Transform

transform-origin in SVG not the same as HTML

Transform on Firefox

Animation

SMIL

CSS

JS

Stroke animation

Stroke

Pattern

Unit

DOM

Filter

Filter cropped, filter size

Filter

Use clip-path over alpha channel filter as mask

Mask

<use> with external source

Optimizations

Performances

CSS animations applied on definition elements

Case sensitivity

Gradient

Gardient — Left to right

Gardient — Top to bottom

Coordinates, position and viewport

Adaptive image

Scale bug on IE

preserveAspectRatio

Align text

Fallback

HTML Entities

Data attributes

Graphics Canvas

Text to Path

SVG Font

`transform-origin` in SVG not the same as HTML

`<use>` with external source

`preserveAspectRatio`