Let’s say we made an SVG file in Illustrator and were very diligent about naming our layers so that you get nice matching IDs in the markup when exporting the file.

This one might seem super obvious, but you’d be surprised how often I see it come up. Our image is scaled down because we increased the viewBox values, but the SVG’s actual width and height dimensions remained the same, and the blue dot made its way back closer to the unclipped area. …then the blue dot is almost fully back in view, as seen in Figure 2 below. If I change the last two viewBox values from 700 to 900 like this: Everything else outside that area is our infinite SVG canvas and gets clipped by default.įigure 1 below shows a blue dot at 900 along the x-axis and 900 along the y-axis. The artboard is the viewport which is represented by a white 700px square. Let’s see what happens in Illustrator when we change these parameters. If we want to keep a 1:1 ratio, our viewBox width and height must match our viewport width and height values. The larger the values, the more SVG units are added to fit in the viewport, resulting in a smaller image. We can change the last two values inside the viewBox to zoom in or out of the image. All I did was “reframe” things with the viewBox. Notice how changing the viewBox coordinates to the same values also changes the circle’s placement to the upper-left corner of the frame while the rendered size of the SVG remains the same ( 700× 700). In the following video I’m adding a red to the SVG with its center at the 300 point on the x-axis and 200 on the y-axis. …the width and height remain the same ( 700 units each), but the start of the coordinate system is now at the 300 point on the x-axis and 200 on the y-axis. The viewport we see starts where 0 on the x-axis and 0 on the y-axis meet. Here’s simplified markup showing the SVG viewBox and the width and height attributes both set on the : The last two are the width and height of the coordinate system inside the viewport - this is where we can edit the scale of the grid (which we’ll get into in the section on Zooming). The first two are the starting point at the upper-left corner ( x and y values, negative numbers allowed). We can specify any length unit we want, but if we provide unitless numbers, they default to pixels. Its dimensions are defined by width and height attributes, or in CSS with the corresponding width and height properties. The viewport is a window frame on the infinite canvas. SVG is an infinite canvas, but we can control what we see and how we see it through the viewport and the viewBox. There are a few additional things about the viewBox that are worth covering while we’re on the topic: How does the viewBox work? In this case, the best option will be to edit the viewBox to show that part of the coordinate system that was hidden:ĭemo applying overflow='hidden' and editing the viewBox. But if we also apply a background-color to the SVG or if we have other elements around it, things might look a little bit off.

The easiest way to fix this? Add overflow='visible' to the SVG, whether it’s in our stylesheet, inline on the style attribute or directly as an SVG presentation attribute. If we were to open the file in some graphics editing program, it might look like this: Screenshot of SVG opened in Illustrator. The elements are there when they’re clipped - they’re just in a part of the coordinate system that we don’t see. At the same time, it can work against us when improperly configured, resulting in unwanted clipping. It’s technically fine to use inline SVG without it, but we would lose one of its most significant benefits: scaling with the container. The viewBox is a common point of confusion when working with SVG. In those cases, there are six specific things that I look for when I’m debugging. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG.īut sometimes, we can’t even see our SVGs at all. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. Someone recently asked me how I approach debugging inline SVGs.

Free for ios instal Boxy SVG