Join Brian Wood for an in-depth discussion in this video Fixes for inline-responsive Internet Explorer, part of Making Your Site Retina-Ready.
- When we add SVG inline just by pasting…the SVG into the HTML,…we typically don't put a width and height inside of there.…So for instance if I go to the code,…you'll see that in the SVG tag…we don't have width and height.…We do have a viewBox and some other required features…in there but it's going to be responsive.…The issue with this is that Internet Explorer…and maybe a couple of the older browsers…really won't make it responsive.…It will act kind of weird actually.…As a matter of fact, let me show you what I'm talking about.…
Let me go over here.…I've got this guy right here…which is basically just pasted inline.…Okay, it's the same thing.…It's SVG pasted in a page.…I'm now in Internet Explorer 9, IE9,…and it's responsive because it's set at…no width, no height, et cetera…and we also have the fix from the previous videos…that we did but it's not working…because it's an SVG embedded or inline.…So you're going to see it's going to act really squirrelly…until it gets to a point that it should…start to scale a bit.…
- 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.