SVG or scalable vector graphics is a standard XML-based vector graphics file type for two-dimensional images on the web. When using SVG graphics on your web page or digital marketing material, it’s critical to know the size of the image to ensure it will be supported and fit appropriately on the display with the other web elements. You can find image dimensions in the image properties of most images, but does SVG function the same?
Not all SVG have fixed dimensions and those that do give a height and width ratio that can be in any number of units. Luckily, there is a way to convert the specified units to pixels so that it can be of more help to you.
There are different types of SVG images when it comes to size. If you have any SVG files that you’re working with and need to know the dimensions, there are ways to figure it out. Please keep reading to find out the types of SVG image sizes and how to find them.
Since you know that most SVG images aren’t going to have the size information so readily available, you need to figure out what kind of SVG image file it is, in terms of size, before you can figure out how to obtain the dimensions. Each of these types will have helpful information to assist you in figuring out how your SVG image file will fit into your project.
There are three SVG Image File Sizes. Each of these can be known through the web browser Chrome:
- No dimensions: This is an SVG image file with no width, height, or view box. Viewbox is an attribute that defines the dimension and position of an SVG file in the user’s space. When there are no dimensions, Chrome and most other browsers will automatically set the image to a default size of 300×150.
- Proportional Dimensions: This is an SVG image file with a viewbox attribute. Chrome will show the size of the image maximized to 300×150. For example, an aspect ratio of 16:9 would equal 1920x1080px or 1280x720px.
- Fixed Dimensions: This is an SVG image file that gives the width and height. Chrome can show these dimensions and convert the specified units into pixels.
Now that we know what different SVG image files we may come across, let’s look at other ways you can find the SVG image file size. SVG files can be quite complicated, especially if you need clear dimensions; you can opt for keeping it simple and using a design website like Placeit.net.
The SVG image file is so ambiguous when it comes to dimensions because it’s not just an image file– it’s also a document. When working with strictly image files like PNG, JPEG, and GIF, you can expect clearly defined sizes, which can easily be found in the properties of the image.
This article has already laid out two ways to find the size of an SVG image file through Chrome and the viewbox attribute. Another way to find the size is by parsing through the XML file code. Below is a snippet of what that code could look like in a text editor.
$xml = ‘
<svg width=”500″ height=”300″ version=”1.1″
As you can see, there are figures for the width and height of the SVG. What is unclear in this example is the unit of size, but that may not be the case when you check out the XML file.
SVG images can be drawn at any pixel size, so they don’t need clearly defined dimensions or aspect ratios. With other image files, you can set scaling to fit the container by forcing the browser to draw the image at a different size than the intrinsic height and width, keeping the aspect ratio constant to prevent distortion. SVG image files don’t work this way; no matter the size of the canvas, the image will remain the size specified in the code.
If you want the image to scale, you will have to provide that information explicitly. The wonderful thing about SVG images is that they look great at any scale without image distortion. You can compress and stretch the graphic as needed without compromising image quality.
Let’s say you created your SVG via Adobe Illustrator, and you want to set your image to specified dimensions; there is a workaround to accomplish this task. Remember that SVG files are “responsive” by default, meaning they do not inherently have height and width attributes, i.e. dimensions.
Once you have your Illustrator artboard up with an SVG file, you will first set your artboard to the specific dimensions you want. You can find the width and height on the top right-hand side. Now go to the menu on the top of the screen and select Object> Artboards> Fit to Selected Art. This process will scale down the artboard to the logo or graphic and remove unnecessary space. Finally, save your image as an SVG, and you’re done.
Another way to size the SVG image file is by opening the .svg in a text editor. Locate the height and width attributes in the code and then erase them. The defaults are 100%, so it will stretch to fit the container. If you’re looking for a specific height and width for the image, you can replace those attributes with the figures you desire.
Many find it helpful to add viewbox and preserveAspectRatio attributes to the SVG. Using these attributes, you can set your height and width by percent values, followed by the aspect ratio figures.
Figuring out the duality of SVG files being both image and document can come with a bit of a learning curve, but with this guide, you’re on your way to understanding how SVG image files work and how to make them work for you.