SVG Basics

Greg Douglas

February 2019

What are SVGs?

Scalable Vector Graphics

"an XML-based vector image format for two-dimensional graphics with support for interactivity and animation"

<html>

<div>

<span>

<h3>

<article>

<svg>

<rect>

<ellipse>

<polygon>

<path>

XML-Based

hotdog.svg

index.html

SVG ~= Markup

Why SVG?

Crisp on any display
Small file size if optimized
Can be edited with a text editor
Can be styled / animated
Accessible
Great browser support

Raster vs. Vector

Vector vs. Raster

hotdog.svg

hotdog.png

3 Kb

1 Kb

.PNG

.SVG

10px

Stroke and Fill

Stroke

Platonic Shapes

ViewBox and Size

ViewBox

Paths and Groups

Group

Polyline

Paths

By Anthony Dugois

Optimization

https://www.flaticon.com/free-icon/dog_194279

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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"
	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
	<g>
		<g>
			<path d="M490.748,146.253c-16.294-27.433-39.185-53.528-54.641-67.218c-33.74-29.893-61.885-29.165-75.662-26.069
				c-5.788,1.301-11.103,3.446-15.782,6.307C320.624,41.434,291.38,32.695,256,32.695s-64.625,8.739-88.663,26.579
				c-4.68-2.861-9.994-5.007-15.782-6.307c-13.773-3.095-41.922-3.824-75.66,26.068c-15.457,13.691-38.347,39.786-54.643,67.219
				C-0.81,183.395-5.724,213.44,6.646,235.557C21.75,262.56,44.66,269.47,63.155,271.174c-4.546,17.655-7.353,36.542-7.353,60.075
				c0,31.193,7.1,58.029,21.105,79.763c12.311,19.108,30.035,34.409,52.679,45.478c41.838,20.451,92.185,22.816,126.415,22.816
				s84.578-2.365,126.415-22.816c22.643-11.069,40.368-26.37,52.679-45.478c14.004-21.735,21.105-48.571,21.105-79.763
				c0-23.532-2.807-42.419-7.353-60.075c18.495-1.705,41.406-8.616,56.509-35.618C517.724,213.441,512.809,183.395,490.748,146.253z
				 M72.878,240.307c-16.368-0.43-29.678-3.599-38.879-20.048c-6.242-11.161-1.067-32.301,14.2-58.002
				c14.489-24.393,35.286-48.079,48.478-59.766c21.786-19.304,38.118-20.367,45.802-19.338
				c-22.867,27.876-36.883,64.104-48.604,99.327c-4.854,14.586-9.532,27.039-14.058,39.084
				C77.397,228.008,75.069,234.206,72.878,240.307z M235.555,343.057c-8.107-8.103-12.35-16.609-12.35-20.823
				c0-3.763,0.645-4.033,3.042-5.042c6.833-2.875,20.253-3.207,29.753-3.207s22.92,0.332,29.753,3.207
				c2.397,1.008,3.042,1.28,3.042,5.042c0,4.214-4.242,12.719-12.35,20.823c-7.973,7.968-16.484,12.267-20.446,12.267
				S243.528,351.025,235.555,343.057z M368.653,428.335c-24.051,11.755-55.889,18.131-96.983,19.394v-64.194
				c12.304-4.748,22.324-13.708,26.93-18.311c6.475-6.471,21.535-23.615,21.535-42.989c0-15.849-7.894-27.899-22.228-33.929
				c-9.554-4.02-21.696-5.66-41.906-5.66s-32.352,1.64-41.907,5.66c-14.333,6.03-22.228,18.079-22.228,33.929
				c0,19.374,15.061,36.517,21.535,42.989c4.606,4.604,14.627,13.564,26.93,18.311v64.194c-41.094-1.262-72.932-7.637-96.983-19.394
				c-37.822-18.488-56.208-50.245-56.208-97.086c0-40.072,9.234-64.649,22.013-98.664c4.413-11.745,9.413-25.057,14.456-40.21
				C151.309,109.139,180.611,64.034,256,64.034S360.691,109.14,388.39,192.375c5.042,15.154,10.044,28.465,14.456,40.21
				c12.779,34.015,22.013,58.591,22.013,98.664C424.86,378.09,406.474,409.847,368.653,428.335z M478.003,220.259
				c-9.202,16.451-22.512,19.617-38.88,20.048c-2.192-6.102-4.518-12.299-6.938-18.743c-4.525-12.044-9.203-24.498-14.058-39.084
				c-11.721-35.223-25.737-71.451-48.604-99.327c7.684-1.027,24.017,0.034,45.804,19.339c13.192,11.685,33.988,35.37,48.477,59.763
				C479.07,187.958,484.245,209.099,478.003,220.259z"/>
			<path d="M203.851,199.256c-11.337,0-20.564,9.321-20.564,20.83c0,11.508,9.226,20.837,20.564,20.837
				c11.352,0,20.577-9.33,20.577-20.837C224.428,208.577,215.203,199.256,203.851,199.256z"/>
			<path d="M307.995,199.093c-11.447,0-20.733,9.399-20.733,20.993c0,11.594,9.286,20.993,20.733,20.993
				c11.434,0,20.719-9.399,20.719-20.993C328.715,208.492,319.429,199.093,307.995,199.093z"/>
		</g>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>