what is svg

Detailed explanations about the SVG vector graphic format, an open standard language that is part of HTML5, used to make 2D vector drawings.

SVG stands for Scalable Vector Graphics, which we could freely translate into Spanish as scalable vector-based graphics. In other words, we can say that it is an XML-based graphic format to create 2D vector files, with a markup language through tags.

It is a W3C recommendation since 2001, although browsers have been implementing it for less time to provide support. Firefox started using it in 2004 and Google Chrome has had it since its first release in 2007. For its part, Internet Explorer has been implementing it since version 9.

As for the versions of the standard, it is at 1.1, although it is supposed that in the summer of 2014 we will be able to attend the launch of version 2. Among its possibilities, we can point out the ability to use three types of graphic objects:

1. graphic vector shapes (including lines, polygons, polylines, rectangles, circles or ellipses, etc.).
2. images and text.

In addition, we can apply transformations to graphic objects (translations, scale, etc.), animations, and filter effects (very varied, like those we know in design programs like Photoshop).

Some advantages of this format are:

• It does not lose quality if we zoom.
• It can be scaled.
• It is displayed progressively, we do not have to wait for the entire file to be downloaded.
• Its size can be reduced through the GZIP compression format.
• CSS styles can be applied to it.
• It can be modified with JavaScript.
• Being XML, it is indexable by search engines.

SVG as vector format

The use of vector graphics in itself has some characteristics that are representative and in the web world, even more remarkable in comparison to the graphics known as “bitmaps”.

Note: The images we normally use on a website are bitmapped, with extensions such as jpg, png, or gif.

Their size is generally smaller in vectors, in bytes, than their bitmapped versions. For example, in the following image we can see that the same graphic in SVG would occupy 2KB and in PNG it would be approximately triple, around 6KB.

Also, the sharpness of an SVG will always be better than a bitmap, especially if we enlarge the image. In a bitmap we will immediately begin to notice the pixelation at the edges, which is known as “saw teeth”, while in SVG the perfect sharpness is always maintained, because it is vectorial.

The following image shows an enlargement of an SVG and a PNG. Needless to say, the one above is the SVG.

Tag structure to make an SVG

As it is a language based on XML, its basic unit is the tags (tags like those of HTML itself). Therefore, when we want to implement an SVG image we must use a tag, which will have a structure like this:

We find several attributes that we explain below in order of appearance (although in practice, when writing the label itself we can put the attributes in the order we want):

• Version: As we said, we are currently at 1.1.
• Namespaces “xmlns” and “xmlns:xlink”, something needed by the XML markup language. The second, which puts xmlns:xlink is to reference files within the SVG, such as images, to put links and if we stop putting it, it usually gives a lot of problems with Mozilla, because the images are lost, the links don’t work, etc.
• Default “width” and “height” attribute in pixels, but we can put it in any unit, like centimeters, picas, etc.
• X and Y coordinates always start in the upper left corner.
• “Viewbox”, the first character represents the horizontal coordinate, the second the vertical, the third the width and the fourth the height. As you can see in the tag code above, they represent the same coordinate values ​​and size of the image, but we can alter them to indicate what exactly we are going to see in the image of everything that is represented in the tag code. svg.

basic shapes

Now we’ll look at a number of basic shapes that we can specify within an SVG image. Of course, these will be created from tags that are nested within the global SVG tag.

rectangle:

Label to get a rectangle.

The x and y attributes are the horizontal and vertical coordinates where we place it, the reference being the upper left corner. Then we assign height and width, fill and border colors, and the thickness of the border line.

If we want it with rounded edges, we add rx=”4″, where 4 is the radius of the rounding, which we can change to whatever we want, of course.

Circle:

Label to make a circle.

All the attributes of the various tags for basic shapes are pretty similar. In this case cx and cy are the x and y coordinates of the circle, however, in this case the reference to locate is the center of the circle. The attribute r is the radius.

Ellipse:

Label to make an ellipse.

It is very similar to a circle, except that in an ellipse we define two radii: one horizontal and one vertical, which can have different values.

Polygon:

To define a polygon based on indicating its vertex points.