Scaling a 150 by 150 pixel image up to 300 by 300 pixels distorts it. Raster images also have fixed dimensions and look best at their original size. When viewed on a higher resolution, 400 PPI display, however, that same image can look fuzzy. A 144 PPI (pixels-per-inch) PNG image looks great on a device with a 144 PPI display resolution. JPEG, WebP, GIF, and PNG are all examples of raster image formats. Raster images are made up of pixels on a fixed grid, with a set number of pixels per inch. Most of the images currently used on the Web are raster images, also known as bitmap images. Issue trackers can be unpleasant to navigate, but for now they’re the best way to track SVG 2 support.īefore we go any further, however, let’s talk about what SVG is and why you should use it. Watch the Support SVG 2 features meta issue to follow Firefox’s implementation work, and WebKit’s Implement SVG 2 meta issue for Safari. Keep an eye on the Chromium meta issue - Implement SVG2 features - to track development progress in Chromium-based browsers. That may have changed by the time you’re reading this. Some of what we’ll discuss here has limited browser support at the time of writing. Support for features of SVG 2, on the other hand, is still a work in progress. Or we can use the same SVG document in multiple places, and show or hide portions of it based on the width of the viewport.Īll major browser engines support the SVG 1.1 specification, and they have done for years. Because it’s a markup language, it has a Document Object Model, and can be used with CSS.īy using CSS with SVG, we can change the appearance of SVG based on user interaction. SVG is a markup format for describing flat, two-dimensional images. Check it out if you’d like to master other advanced CSS3 features like Flexbox and Grid!Īs well as using CSS with HTML, we can also use CSS with SVG, or Scalable Vector Graphics. This article is an extract from Tiffany’s book CSS Master, 3rd Edition. We can do something similar when using SVG with media queries. If the browser window is 480 pixels wide, for example, we might shift our navigation from a horizontal one to a vertical, collapsible list. In HTML documents, we can show, hide, or rearrange parts of the page based on the conditions of the viewport.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |