From the course: Making Your Site Retina-Ready
Unlock this course with a free trial
Join today to access over 24,700 courses taught by industry experts.
Understanding SVG
From the course: Making Your Site Retina-Ready
Understanding SVG
- SVG, or Scalable Vector Graphics, is a two-dimensional vector format made of XML. Now oddly enough, SVG came into being just years ago, but only was later supported by browsers. Today SVG is used for everything from like logos, to icons, to animated content because it can be controlled by CSS. It is vector on the web, which means it's crisp and beautiful, can have animation controlled by scripting, like JavaScript. It's perfect for Hi DPI devices since it's vector, scalable, and just works in all the browsers we care about. I have the website open here, hidpi.brianwoodtraining.com, and I went to the SVG page and you can see that I've got some examples of images here. Now just to give you a little bit of history, a little more history, I should say, on SVG, I want you to take a look, if you want, at this website called evolutionoftheweb.com, and it talks about where things have come in as far as browsers and technologies and you're gonna see SVG right here, kind of interesting, it…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
Understanding SVG5m 12s
-
(Locked)
Making an SVG file using Illustrator8m 50s
-
(Locked)
Optimizing SVG4m 8s
-
(Locked)
Adding an SVG file (.svg) to your page3m 52s
-
(Locked)
Fixes for responsive Internet Explorer5m 20s
-
(Locked)
Adding SVG inline9m 1s
-
(Locked)
Fixes for inline-responsive Internet Explorer5m 44s
-
(Locked)
Adding SVG as inline URI (and why)6m 20s
-
(Locked)
Adding an SVG fallback for older browsers12m 44s
-
(Locked)
-
-
-