SVG Image and advantage
"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
HTML5 spec allows for the use of an SVG inside the tag, which makes it super easy and fast to get started using SVG, and this is where we’ll go in this tutorial. Here’s what our source code could look like using SVG inside an tag:
.svg" alt="Example ">
Pretty simple. And that’s it. And in browser it will renter as a XML codes
To create an SVG, you’ll need a vector graphics program like Adobe Illustrator or Inkscape. I recommend create your svg image based on size as per your screen cover with what size page you are using then use a canvas inside Illustrator at these dimensions, making sure your graphic fills the full width/height and its an XML based vector image format we can adjust some shapes and color while using css .
Now a days SVG will support most the modern browser only we getting problem with internet explorer 8 and older versions of IE. And also it will support what are the browser what I mentioned below .
- Internet Explorer 9
- Firefox 17+·
- Chrome 17+·
- Opera 15+·
- Safari 6.0+·
- Safari on iOS 6.0+·
- Android browser on Android 3.0+
Here I mentioned just an example how SVG images will great for handle file size compressed, the raw SVG file was 2445 bytes. The PNG version was only 1064 bytes, and the double-sized PNG for double-pixel ratio devices was 1932 bytes. On first appearance, the vector file loses on all accounts, but for larger images, the raster version more quickly escalates in size.SVG files are also human-readable due to being in XML format. They generally comprise a very limited range of characters, which means they can be heavily Gzip-compressed when sent over HTTP. This means that the actual download size is many times smaller than the raw file — easily beyond 30%, probably a lot more. Raster image formats such as PNG and JPG are already compressed to their fullest extent.
Now a days most of the client want to see there logo and icons very Crisp and sharp, there is no matter what ever the device they using and what are the Screen resolutions they are browsing , here we go the actual advance with SVG images , because SVG offers a truly resolution-independent technique for presenting graphics on the Web. SVG is a vector graphics format that uses XML to define basic properties such as paths, shapes, fonts and colors, and more advanced features such as gradients, filters, scripting and animation. Create the file once and use it anywhere, at any scale and resolution.