If what you want is to create content for a website and for this content to be responsive (and who wouldn’t want this?), then you definitely need to know about the existence of the SVG format.
SVG: Scalable Vector Graphics is the best option we have today to create graphics for the web.
SVG: a friend of Google and users
SVG is an acronym that corresponds to “scalable vector graphics”, that is, scalable vector graphics. Therefore, we forget the misery of the pixel and move on to something better, which will finally take up less space (it is very important in web design to take up as little space as possible to make the user and google happy and obtain more conversions and good positioning) and that will give us better performance and image quality.
As we know, responsive design is largely about managing different screen sizes and SVG is an ideal format to do so. Thus, one of the great advantages of SVG is that it is “resolution independent”, that is, the resolution factor does not affect and therefore you do not have to think about how many pixels the devices have, since it will always look good on all of them.
For example, if we want a logo to be the background of our website and for it to adapt to different screen sizes, we have two options:
- Work in bitmap (png, jpg) and make several versions of the logo at different sizes so that it adapts to each type of screen. From Android mobiles with smaller screens, through phablets and ending with zillion-inch iMacs with retina displays… Wow. How much space will it occupy in our hosting? How many versions to different measures will we have to make? And if we make a mistake and forget a big screen, we can even end up with a pixelated design.
- The other way, much more elegant, is to use the SVG format. A single image for all screens. It takes up very little space. It is scalable to all types of screens and resolutions that may arise.
SVG is obviously the way to go. For elegance, positioning in Google, and usability. We recommend you visit Joe Harrison’s «Responsive Icons» website to see how an icon is resized in SVG (you have to make the browser screen smaller to see it).
Selectable texts
SVG allows you to offer images with selectable text. This makes life easier for users as they can copy and paste. And, in addition, it is indexable by Google and therefore it will help us to climb positions and improve our SEO.
The SVG format allows us, on the one hand, to use fonts with paths, but it also allows us to include them within the file itself in TrueType and Type 1 format, which gives us an extraordinary capacity in that search engines are capable of indexing it. Keep in mind that for the pure text placed as typography it has to be either from the fonts installed in the system or included as a CSS style.
Projects like Iconic also use the SVG format to make typography with icons serve us for the different uses and needs of size and variation depending on the actions we want. You can see examples on their website with which you will really and deeply understand the true use of the SVG format.
And the jackpot goes to… interactivity!
SVG is also used by Google or Bing to draw the blue road on Google Maps. SVG therefore supports interactivity, graphics can vary as data changes. And not only that, SVG also supports CSS and so when we change the design of our website, it can also change that of the SVG graphics. A luxury.
