SVG. Best Image Format For The Web?
by María Badanina and Aroa Tato
SVG (Scalable Vector Graphics) is a bidimensional vector image file format and is more powerful and suitable for web than other image formats. Unlike raster formats such as JPG, GIF, and PNG, an SVG image stay crisp and clear at any resolution or size.
That’s because an SVG is drawn from mathematically declared shapes and curves (Bézier curves), not pixels. SVG format can be animated, support transparency and any combinations of colors or gradients. SVG is much lighter than raster formats, which positively affects the performance of the site. SVG is the preferred format for images like user interface controls, logos, icon and vector-based illustrations.
With SVG you can make three types of graphic objects:
— Vectorial geometric elements like paths with their straight, curves and area between them.
— Images
— Text
There are two ways to create SVG file:
— In graphic editor such us illustrator (paid app) or Inscape (free app).
— In code editor like VS Code, Atom, Dreamweaver etc.
SVG elements belong to DOM (Document Object Model). It can be embedded (as a code) inside HTML document. Embedded SVG has its own viewport and coordinate system, and it can be created and modified with XML tags. For example, if you want draw a circle, inside of a html file, you can do it with the <circle> or <ellipse> tag.
Image taken from webdesign.tutsplus
Here you can find a list of SVG tags for draw objects in code editor.
One of the greatest things about SVG (aside from their being infinitely scalable without quality loss) is that once you know the fundamentals you can hand-code simple shapes quite easily, without needing to open a graphics application. With just a few lines of code you can have your own custom icons, and you’ll know exactly how each one is put together. When you create your own SVGs you ensure they are written in the most efficient way possible, and you have the maximum level of control when using them in your sites.
Advantages of SVG format:
— It is a open format so you can be sure when you use it, it will be working in most modern browsers.
— It is highly understandable and it is easy to write and edit.
— It is shown progressively, we don’t have to wait for the entire file to be downloaded.
— It is a good option in responsive format because you can use the same image without losing quality. It is not dependent on resolution.
— Every element and every attribute in SVG files can be animated.
— You can apply CSS styles and it can be handle with JavaScript.
— Being XML, it is indexable by search engines.
We are agree that SVG has a lot of advantage but there are few disadvantages like:
— It is incompatible with browsers like IE8 and Android 2.3.
— It is very precise with the properties used in its implementation, according to the browser on which we test our site.
— The file size will grow very fast, if the object consists of a large number of small elements.
— it’s impossible to read a part of the graphic object, only the entire object and it slows you down.
In spite of few disadvantages, SVG is a great image format for websites, and if you still don’t use it, you need to do it right now because it will not only improve your site performance, but it will also make your life easier.
Bibliography:
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started
- https://desarrolloweb.com/articulos/que-es-svg.html
- https://www.hiberus.com/crecemos-contigo/guia-de-uso-de-svg-paso-paso-parte-1-por-que-usar-svg/
- https://www.maismedia.com/blog/tutoriales/guia-practica-svg-web
