With SVGs, however, there’s just one piece of code to rule them all. I, myself, made use of inline SVG for my personal website as a hero image:Īnother issue with raster images is that for responsive design, we might end up using multiple images for different screen sizes. As we saw earlier, SVG is code, which empowers us to insert it within the DOM. SVGs are not only smaller in size but also more flexible in that we can embed SVG code inline to our HTML, eliminating any HTTP requests. The more images you have on your webpage, the more HTTP requests it needs to make, slowing down the site. Transparency in images result in ludicrous file sizes and a slower load time since browsers take longer to render/load large files.Įach time your browser wants to render an asset, it needs to make an HTTP request to the server. a transparent background so that the image and can take the effect of others behind it). One common use case for using PNGs is transparency (i.e. PNGs usually have fairly large file sizes, especially when rendered on HDPI displays. They say “time is money.” To me, that translates to “speed is money.” You know…because physics taught us that speed is inversely proportional to time (yes, I’ve been told that I’m a huge nerd). Now that we understand how SVG works under the hood, let’s take a look at the reasons for using SVGs. Unless you’re utilizing raster images as a fallback for the ancient IE, I’d say that your time is up. What surprises me is that the main culprits of PNGs seem to be icons and logos. The Web is filled with raster graphics, especially PNGs. Photograph by Matt Deslauriers But, how will SVGs save us? Close or end ( Z) the path by connecting back to the starting point.Draw a Line to coordinates (X = 200, Y = 300).Draw a Line to coordinates (X = 300, Y = 100).
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |