“SVG images one of the best way to do full resolution graphical elements, no matter what screen size, what zoom level, or what resolution of your device, it will never lose the quality or it will never pixelated.”
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator or Inkscape. You can use SVG on the web pretty easily, but there is lots of advantages with SVG image using web and mobile application
Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next generation of display standards.
Here we go what is Screen density is often measured in pixels per inch (PPI). Apple has introduced the marketing term “Retina” for its double-density displays, they are telling that the human eye can no longer distinguish individual pixels on the screen from a “natural” viewing distance. This would use 200 × 300 device pixels to be drawn on screen. On a Retina display, the same div
would use 400 × 600 device pixels in order to keep the same physical size, here it’s a chance to pixelated smaller images while scaling to big size, here we can solve problem with using SVG images
In case you haven’t heard, responsive design and browser agnosticism is a hot topic in front-end development these days. Most of the solutions that exist to fix resolution-based image issues (for retina screens, for instance)) according to screen resolution we can’t able to use different images or compromise for one browser or the other, Responsive website design moves us away from the fixed-width pages we’ve grown accustomed to replacing them with shape-shifting layouts and intelligent reflowing of content. Add to that a thoughtful content strategy and mobile-first approach, and we’re starting to offer an experience that adapts across devices and browsers to suit the user’s context. Fitting the website to the viewport is about more than just layout: it’s also about resolution. so why SVG is a perfect addition to future-friendly Web development.
- Small file sizes that compress wel
- Scales to any size without losing clarity
- Looks great on retina displays·
- Design control like interactivity and filters
There are a few ways to use SVG in our HTML document , as an