How I see SVG (Part 1)

If there's a format that can exist between the development and design worlds, it's named SVG.

SVG (Scalable Vector Graphics) is an XML-based format to describe vector graphics.

That means:

For developers:

• Markup language, like HTML.

• Can be edited in a text editor.

• Is one of the oldest formats that is still relevant today.

For designers:

• Can be previewed everywhere.

• It can be edited or exported from a lot of apps like Illustrator, Figma, or Inkscape (there are a lot of apps online too).

Nowadays, this format is used a lot; e.g., all the icons used in any app or website you're using right now may be SVG files.

SVG Explanation

Now, let's watch an example of an SVG code and its preview.

Let's explain what you can see here:

The code seems like HTML. It has tags and attributes, and those tags can have IDs too! All the elements are wrapped in an SVG tag, with a series of attributes, the majority of which are self-explanatory (width, height, fill) and others like xmlns that I never cared what meant (it's mandatory only if it's not embedded into the HTML code).

👆🏼 For the designers: Let's imagine that the units of the values you will see are pixels. Later, we'll cover the relativity of the units in this format.

The viewBox attribute

For this example, let's remove the width and height attributes to better understand what we can do with this attribute:

In the code, please look for the couple of attributes that are named viewBox. This attribute has four numeric values in order: X, Y, Width, and Height.

In the first example: X:0, Y:0 Width:200 Height:200.

In the second example, X:50 Y:70 Width:150 Height:100

This is a graphic explanation of the second example:

The viewBox tag acts as a camera viewport for the graphics in the file, and those numbers act like the coordinates to locate the camera and its dimensions.

The "g" tag

Like in many vector graphics apps, we can group elements. This is where the group tag comes in.

The "primitives" tags

Many tags are called primitives; those are the basis of many graphic representations like rect, circle or ellipse; there are a lot more, but in this example, we just use the first two. In the rect and circle tags, we can see new attributes related to their position or origin, but they are self-explanatory too. To clarify, the cx, cy and r attributes are circle X origin, circle Y origin, and radius, respectively.

What can I do with all of this?

I think SVG code is like HTML code, so I treat it the same. The tags can have IDs or classes, so I can access those elements via CSS or JavaScript because those elements are part of the DOM when they are embedded.

Please see this example and hover over the different elements:

Let's break this example into parts:

HTML

1. The SVG has a group with three elements: two rectangles and one circle.

2. The group has an ID: svggroup.

3. One rectangle has ID: my_rect.

4. The circle has its own ID, my_ellipse.

CSS

1. We assigned dimensions to the SVG.

2. The elements with IDs now have a transform-origin, a transform-box (delete it and see what it changes), and a transition.

3. Each of those elements has a hover state.

4. The transform and the opacity are modified in their hover state.

In this case, we didn't manipulate any of the attributes, but we used CSS to animate them.

Only that?

No. We can do more. The sky is the limit, and by exploring every tag, attribute, and reference, we can make a lot of things.

This is an example with CSS and just a little of JavaScript. Just click the buttons to see the animations:

The buttons just gave classes to the group with ID mira. The rest is CSS.

In the next articles, we'll see more detailed aspects of how we can take advantage of this format.

Thanks!

Reference

If you wanna dig more about every tag and what can you do with this, these are two excellent links to learn everything:

• Interactive SVG Reference: https://fffuel.co/sssvg/

• MDN SVG Reference: https://developer.mozilla.org/en-US/docs/Web/SVG