SVG The SVG element viewBox

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

The viewBox attribute defines the coordinate system for an <svg> element. This allows you to easily change the size and relative proportion of an SVG graphic without having to adjust the position and dimensions of every individual drawn element.

<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

That code looks like this:

large 60px star icon

Without the viewBox, it looks like this:

small 16px star icon



Got any SVG Question?