What is svg

Operations software. Connect your favorite apps to HubSpot. See all integrations. We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our privacy policy. Written by Jamie Juviler WebsiteJamie. Learn more about redesigning your website with this free workbook.

In the process of designing a user-friendly website, you might encounter some difficulty with images, especially with image resolution.

Image quality is important to get right — fewer things look less professional on a page than a distorted, poorly-scaled logo, icon, or photo. This problem is only compounded by responsive design. 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. As it turns out, there is. An SVG file, short for scalable vector graphic file, is a standard graphics file type used for rendering two-dimensional images on the internet.

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. 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.

These are raster-graphics formats, which means that they store image information in a grid of colored squares, also called a bitmap. The squares in this bitmap combine to form a coherent image, much like pixels on a computer screen.

Raster graphics work well for highly detailed images like photographs, in which the exact color of each pixel needs to be specified. Raster images have a fixed resolution, so increasing their size lowers the quality of the image. These formats store images as a set of points and lines between points. 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. Vector graphic files also store color information and can even display text.

SVG files are written in XML , a markup language used for storing and transferring digital information. We only need one line of code to draw a circle. In the code above, tags are shown in pink within angle brackets.

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.

All modern browsers render SVGs this way, as can specialized graphics editing software. SVGs are basically text files, which makes them readable by humans. This enables developers to make edits to XML files directly. For instance, I could replace the fill value to change the color of the circle:. Of course, we can accomplish a lot more with vectors than basic circles.

But, the concept is the same. All of the values in this tag specify the points of the graphic and the lines between these points. This is important because the size of web images differ by viewer, based on browser window dimensions, device, zoom, site layout, and responsive design. Measure content performance. Develop and improve products.

List of Partners vendors. Tim Fisher. VP and General Manager, Lifewire. Facebook Twitter LinkedIn. Updated on October 27, Ryan Perian. Lifewire Technology Review Board Member. Article reviewed on Feb 13, Tweet Share Email. Was this page helpful? Thanks for letting us know! Email Address Sign up There was an error.

Please try again. You're in! Thanks for signing up. There was an error. Tell us why! More from Lifewire. Only the scale changes. SVG is fully editable and scriptable. SVG files are text-based, so when embedded in a web page, they can be searched and indexed. This makes them accessible to screen readers, search engines and other devices. One of the most important aspects impacting web performance is the size of the files used on a web page.

SVG graphics are usually smaller in size compared to bitmap file formats. Any traditional drawing that lends itself to being produced using pen and pencil should translate perfectly into the SVG format.