Join Brian Wood for an in-depth discussion in this video Adding an SVG file (.svg) to your page, part of Making Your Site Retina-Ready.
- One of the first methods for adding SVG…to our web pages that most of us will start with…is by adding SVG as an image tag.…You can see that here…on the HiDPI website that I've got.…Now this method's pretty easy…and it works in a lot of browsers.…It does make it a little bit limiting…if you want to control parts of the SVG…with CSS for instance, or animate it…since the image is a single object.…But it's pretty easy and it's used quite often,…and it's something that we all usually start with…and we eventually wind up going…to what's called inline SVG.…
But this is what we're gonna start with.…Now I've got a couple of images…in the folder here, one called logo-responsive…and one called logo.…Now log-responsive has the width and height…taken out of the code.…That was with responsive checked in Illustrator.…Logo has the width and height…in the code, in the SVG code.…So we're gonna see the difference there.…We're gonna put both of them in.…So go over to my code,…and you're gonna see Add SVG here.…Let's go put it there.…
- What is HiDPI?
- Adding your first icon font
- Adding hover states and animation
- Working with SVG files
- Creating favicons
- Displaying HiDPI images
Skill Level Intermediate
Creating Icon Fonts for the Webwith James Williamson3h 55m Intermediate
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 43s Beginner
Design the Web: Using Symbols in SVGwith Chris Converse20m 27s Intermediate
Photoshop and Illustrator: Creating Retina Graphicswith Justin Seeley1h 11m Intermediate
1. Introducing HiDPI or Retina
What is HiDPI (retina)?9m 16s
2. Icon Fonts
5. HiDPI Images
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.