Demystifying SVG Image Files
Graphics That Offer Clarity
Scalable Vector Graphics
If you’re new to web development, opening up an SVG file for the first time can be a little overwhelming. Why is it so huge? What are all of these foreign attributes? Why does it not respond to CSS styling in the same way other image files do? It might be intimidating but once you see how scalable and customizable these files are, you’ll definitely prefer to utilize them whenever possible.
Raster vs. Vector
Comparing raster and vector graphics is like comparing old-school Super Nintendo games to modern 4K HD films. Raster graphics use a dot matrix data structure to define the placement of pixels on a bit-map, which you can imagine as a rectangular area with a defined width and height. These are your typical image files. The problem is that when you zoom in on them, things can get a little blurred.
As you can see, those boxy pixels are not seen in the SVG displayed above. The S-shape is preserved because instead of using a dot matrix, SVG files define the image as many coordinates with lines and curves connecting them. Pretty amazing, right?
XML
SVG files are made up of XML-based code. XML stands for Extensive Markup Language and it’s meant to be readable by both humans and machines. Using this language, we get to assign the appropriate tag names for elements and define their unique properties. SVG files typically hold a number of individual elements that make up the image as a whole. Because of this, we can define the properties of isolated shapes within the whole picture.
Some SVG element tag names are actual shape names like circle or rect (for rectangle). You can find the whole extensive list of them here. You’ll see that there are some elements that are specifically for animated content because another advantage to SVGs is that they are great for animation.
The path element is a little more complex. It only takes the d attribute which is assigned a string of commands. The first character in each substring is a letter that represents the command and any letters or numbers that follow define the specifications needed. Capitalized letters in the substring refer to an absolute positioning while lower-case letters indicate relative positioning. For example, this substring ‘M 50 150’ tells us that this element’s positioning will be absolute. The M stands for the ‘move to’ command and the numbers after are x and y coordinates. You can read about all the path element commands here.
Some of the defined attributes will look familiar like width and height, yet others you may have never seen before like fill or stroke color. Getting to know these properties is essential when creating or customizing vector images.
SVG Attributes and Styling
A huge differentiating factor between SVGs and other image files is that SVG images can be edited directly in a text editor! It is possible to change not only the way the image is displayed but also change the image itself without needing a graphical editor. We can do this by defining specific attributes.
Global attributes such as id, class, and style live within the element’s opening tag. Shape elements like circle and rect need x and y attributes to define their positioning. For example, a circle element would have cx and cy attributes representing its coordinates as well as an r attribute that defines its radius.
Presentation attributes like stroke, stroke-width, and fill are frequently used for styling. Stroke refers to the size of the element’s outline, while fill refers to the color that is distributed throughout the element.
SVGs have their own CSS styling attributes. Presentation attributes can be controlled within external CSS files. It’s important to note that Safari doesn’t sufficiently support SVG images if they aren’t added inline in the HTML file. Yes, it IS a lot of code to insert but it’s definitely recommended to ensure your images are visible on any device.
Take-aways
SVG files have revolutionized image scalability and customization. Given that these days more than half of all web usage is done via a mobile device, scalability is more important than ever.
Getting familiar with SVG attributes opens up flexibility to customize specific elements within. We can style SVGs with inline styles or external CSS files. Global id or class attributes can be used to style the whole image. We don’t need a graphical editor to manipulate the lines and shapes within. Instead, we can change the appearance in the text editor by defining the fill and stroke attributes of isolated elements. The possibilities are endless!
