Using SVG

facts about svg

1. what is svg?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation . The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

2. why use svg?

responsive design

resolution independent

scalable

3. how to create svg?

use one of these applications for svg creation

adobe illustrator

inkscape

sketch

4. when to use svg?

logo

icons

basic shapes

text

selectable text
searchable text
scalable text
positioning
crisp
styling
animating

5. svg gradients

linear gradient

radial gradient

linear gradient

radial gradient

clean code


					<svg>

					<defs>

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

					<stop offset="0%"   stop-color="#ffdb4c" stop-opacity="1"/>

					<stop offset="100%" stop-color="#fcc30d" stop-opacity="1"/>

					</linearGradient>

					</defs>

					<rect x="10" y="10" width="75" height="100" rx="10" ry="10"

					style="fill:url(#myLinearGradient1); />

					</svg>

6. future proof