Let’s open this SVG file in a text editor: Though a simple icon, this graphic consists of 30 lines connected by 30 points: Let’s look at a more complex image, the HubSpot sprocket logo: Of course, we can accomplish a lot more with vectors than basic circles. For instance, I could replace the fill value to change the color of the circle:
This enables developers to make edits to XML files directly.
SVGs are basically text files, which makes them readable by humans. You’ll also notice that this XML file is written in English. All modern browsers render SVGs this way, as can specialized graphics editing software. When provided an SVG file like this one, a web browser (or other application) takes in this XML info, processes it, and displays it onscreen as a vector image.
#f4795b is the hexadecimal color code for this particular shade of orange. To draw the circle, the XML code specifies the shape with a tag, its position with the and with the cx and cy attributes, the radius with the r attribute, and the color inside the tag. In the code above, tags are shown in pink within angle brackets. That’s because XML does most of the work for us with tags. We only need one line of code to draw a circle. When I open the file for this circle in a text editor, this XML code appears:Īs you can see, there’s not much code here. I’ll start by drawing a simple circle SVG: The XML code in an SVG file specifies all of the shapes, colors, and text that comprise the image. SVG files are written in XML, a markup language used for storing and transferring digital information.
Vector graphic files also store color information and can even display text. Mathematical formulas dictate the placement and shape of these points and lines, and maintain their spatial relationships when the image is scaled up or down. These formats store images as a set of points and lines between points.
Vector-graphic formats - like SVG and PDF - work differently. Raster images have a fixed resolution, so increasing their size lowers the quality of the image. Raster graphics work well for highly detailed images like photographs, in which the exact color of each pixel needs to be specified. The squares in this bitmap combine to form a coherent image, much like pixels on a computer screen. These are raster-graphics formats, which means that they store image information in a grid of colored squares, also called a bitmap. You’re probably familiar with the common formats PNG and JPEG. There are more than a few image file formats in use on the web today, which we can divide into two categories: raster graphics and vector graphics. This prompts the question: What exactly is a vector graphic? Raster vs. Unlike other popular image file formats, the SVG format stores images as vectors, which is a type of graphic made up of points, lines, curves and shapes based on mathematical formulas.
I’ll explain what these files are, when to use them, and how to get started creating SVG files yourself.Īn SVG file, short for scalable vector graphic file, is a standard graphics file type used for rendering two-dimensional images on the internet.Īn SVG file, short for scalable vector graphic file, is a standard graphics file type used for rendering two-dimensional images on the internet. In this guide, I’ll cover all the fundamentals you’ll need to know to get started working with SVGs. There’s a lot to unpack and learn about SVGs. SVGs are something of a magic trick in website design - not only do they generate crisp graphics at any scale, but they’re also optimized for search engines, programmable, often smaller than other formats, and capable of dynamic animations. It’s called the SVG format, and it’s perfect for non-photographic imagery on websites. Wouldn’t it be nice if there were a digital format that made images look great, no matter their size?Īs it turns out, there is. Visitors are viewing your content on desktops and smartphones alike, so, along with the rest of your content, your images should be optimized no matter the device. This problem is only compounded by responsive design.
Image quality is important to get right - fewer things look less professional on a page than a distorted, poorly-scaled logo, icon, or photo. In the process of designing a user-friendly website, you might encounter some difficulty with images, especially with image resolution.