Join Brian Wood for an in-depth discussion in this video Adding SVG as inline URI (and why), part of Making Your Site Retina-Ready.
- Simply pasting the SVG code…into your HTML or CSS is an easy way…to inline that content, but it isn't cached…as an image like we discussed previously.…If you want to add SVG inline…and also have that image caching,…you can insert the SVG inside of an image tag.…And this still allows you to control it…with CSS and scripting, and animate it.…But it also means adding another step to the process…because we need to encode the SVG…for all browsers to make it work.…Let's take a look.…You can see right here that I have an example…down on the page here, and the way we do this…is we actually get the SVG file itself.…
We go through and we optimize it…like we normally would,…and we're gonna copy and paste that…but not directly into the HTML.…We're actually gonna encode it first.…What we need to do is we need…to put it inside of an image tag…that contains this content.…So you can start here.…I'm just gonna copy that.…This is on the hidpi.brianwoodtraining.com website.…You can go to the SVG page and scroll down.…Go over to your code, and what we're gonna do…
- 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 Beginner
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.