If you need line art that looks good at any size, small to enormous, then find out how SVG might be exactly what you need.
- [Instructor] The last format we'll discuss is one…that's ideal for line art, SVG Scalable Vector Graphics.…GIF, PNG and JPEG images are in Raster format.…They treat the images a grid of individual pixels.…If you take a PNG file and enlarge…it by a factor of 300 percent,…the browser has to expand the pixels,…which gives the image a jagged,…ugly look.…SVG, however, doesn't store pixels.…It stores images as a series of shapes to be drawn.…The file consists of commands that tell the browser…what geometric shapes to draw.…
It looks a lot like HTML.…This example tells the browser to draw an ellipse…and a rectangle with the specified positions,…dimensions and styles.…Here's what the enlarged portion of the airplane looks…like when the SVG version of the drawing is enlarged.…The browser is drawing the shapes with crisp edges…no matter what sizes they're scaled to.…That's the scalable part of SVG.…This makes SVG a great choice for drawing icons and logos…that have to look good at any size.…You don't have to learn how to write SVG by hand.…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- 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.