In short, the WebP image type was created to generate much smaller file sizes and eliminate the need to use different image types on the web. I feel as if discussing WebP would make this article more confusing than helpful as it’s a different subject altogether which I’d be happy to consider in another article. We also have the more recent image type of WebP, developed by Google which aims to supersede the JPEG, PNG and GIF file formats altogether as a singular more flexible solution.
Typically, this means that as soon as you start to increase or decrease an image of this type, you are presented with jagged lines, blurry artifacts and a pixelated mess. Well, traditional image types like JPEG, PNG and GIF are bitmap-based (or raster-based), meaning they consist of a set amount of pixels. That SVG file would render a 250 pixels wide, blue square. In its simplest form, this is what an SVG file looks like under the hood: SVG images are predominantly found on the web, and while they have comparable uses to JPEG, PNG and WebP image types, their DNA is extremely different. SVG stands for “Scalable Vector Graphics” and is an XML based, vector image format. SVGs can be animated directly or by using CSS or JavaScript making it easy for web designers to add interactivity to a site.SVGs can be scaled indefinitely meaning that they will always render to pixel-perfection on newer display technologies such as 8K and beyond. SVGs can be embedded into the HTML which means they can be cached, edited directly using CSS and indexed for greater accessibility.They are SEO friendly allowing you to add keywords, descriptions and links directly to the markup.SVGs are vector images and therefore are usually much smaller in file-size than bitmap-based images.SVGs are scalable and will render pixel-perfect at any resolution whereas JPEGs, PNGs and GIFs will not.7 Reasons Why You Should Be Using Scalable Vector Graphics
#Boxy svg ppi how to#
Today I’ll be taking a look at what SVGs are and why you should start using them, and how to get started even if you’re not a designer yourself.Īnd in case you want to get straight to the good stuff, here are the main reasons why you should be using SVGs if you’re not already. The adoption and adaptation of SVGs is without a doubt one of my favorite things to happen to the design and developer community in recent years.Īs a designer, they were the aspirin to many a headache that always occurred during the development handover.
0 kommentar(er)
