Power of SVG

Why SVGs are awesome

Handwritten code

You can create SVG in every editor

				<svg>
				    <line ... />
				</svg>
			

SVGs are scalable

Accessibility

				<svg aria-labelledby="imgTitle imgDesc" role="img" >
				    <title id="imgTitle" >Tea cup</title>
				    <desc id="imgDesc" >
				        It is hot tea cup
				    </desc>
				    ...
				</svg>
			

Accessibility

CSS/JS in SVG

			<svg...>
				<style>
					@import url(../common/index.css);
					@import url(page.css);
				</style>
				...
			</svg>
		

SVGs are responsive

SVGs are responsive

			.hidden-sm, .hidden-md { transition: all 1s }
			@media (max-width: 380px) {
				.hidden-sm { opacity: 1 }
				.hidden-md { opacity: 0 }
			}
		

Good support

SVG vs Icon Fonts

SVG vs Icon Fonts

• Common problems with font support;
• Different browser — different render;
• Usage of ::before and ::after pseudo elements;
• Difficult stylization — only color, shadow, size;
• No multicolor ability;
• Problems in case on fail font loading, during the font and css loading.

SVG vs Icon Fonts

SVG vs JPG/PNG

• JPG/PNG are impossible to stylize;
• For modern screens you need to make @2x, @3x sizes;
• Often you have to choose between good view and big size.

SVG vs JPG/PNG

How to use SVG?

How to use SVG?

Image

			<div>
				<img src="apple.svg" alt="Apple" />
			</div>
		

How to use SVG?

Inline svg

			<div>
				<svg ... >
					<line .... />
				</svg>
			</div>
		

How to use SVG?

Embed, object, iframe

			<div>
				<iframe src="apple.svg" ... > </iframe>
			</div>
		

How to use SVG?

SVG sprites

			<svg>
				<defs>
					<symbol id="pinapple"><line .../></symbol>
					<symbol id="grape"><line .../></symbol>
					<symbol id="orange"><line .../></symbol>
				</defs>
			</svg>
		

How to use SVG?

SVG sprites

			<div>
				<svg>
					<use xlink:href="fruits.svg#pinapple" />
				</svg>
			</div>
		

How to use SVG?

In CSS as background-image

data:image/svg+xml, data-url

			.element {
				background: url(apple.svg);
			}
		

Optimize your SVG

You can save up to 90%

SVG primitives

SVG primitives — lines

SVG primitives — dashing

SVG primitives — corners

SVG gradients

SVG Clip-path

SVG masks

See the Pen Flashlight by yoksel (@yoksel) on CodePen.

SVG filters

See the Pen SVG Glitch by Dirk Weber (@DirkWeber) on CodePen.

currentColor

CSS variables

Loaders

See the Pen SVG Sprite Animation by Mark Nelson (@marknelson) on CodePen.

See the Pen SVG Path Animation by Poorva Janbandhu (@poorvanj) on CodePen.

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kyleHenwood) on CodePen.

See the Pen SVG Animated Drum Kit (Play Me!) 🥁 by Josh (@iamjoshellis) on CodePen.

See the Pen X-ray me (SVG Experiment) by Noel Delgado (@noeldelgado) on CodePen.

See the Pen When you're an introvert... by Sarah Drasner (@sdras) on CodePen.

What else about SVG?

• Some libs:
  snapsvg, velocity js, svg js, d3 js
• Graphs: css-tricks
• Games
• ...

Links

• SVGs for any case
• Accessible SVG
• Optimize your SVG
• css-tricks
• currentColor
• Lea Verou: CSS Variables
• Seren Davies: Death to icon fonts
• Chris Coyier: The wonderful world of svg
• Css tricks: mega list svg
• Understanding SVG Coordinate Systems and Transformations
• SVG in emails