Как изменить viewbox через css

Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.

Спецификация.

Вьюпорт

Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).

SVG позволяет управлять как размерами вьюпорта, так и поведением содержимого относительно него: оно может обрезаться или показываться полностью, может растягиваться с потерей пропорций или стараться уместиться целиком, даже если при этом появляются пустые поля. Этим поведением можно управлять с помощью атрибутов.

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:

Ширина и высота

Шириной и высотой элемента можно управлять стандартными свойствами width и height:

<svg width="350" height="200">
  ...
</svg>

Их можно задавать как атрибутами, так и в CSS:

.mysvg {
  width: 350px;
  height: 200px;
}

Для размеров в пикселях, задаваемых в атрибутах, единицы измерения можно не указывать.

Потаскайте ползунки, и вы увидите, что изменение ширины и высоты влияет только на вьюпорт и не влияет на содержимое, потому что оно отрисовывается на бесконечном холсте, и неизвестно область какого размера нужно ресайзить.

viewBox

Похожим образом не изменяя размеры содержимого ресайзится iframe, но в случае с SVG это поведение можно изменить, если определить размеры области с помощью свойства viewBox:

<svg width="350" height="200"
    viewBox="0 0 180 180">
  ...
</svg>

Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.

Попробуйте теперь изменить размеры, и вы увидите, что содержимое отресайзится, чтобы поместиться целиком.

viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:

Это очень простое демо, вот пример посложнее от Sarah Drasner.

Интересно, что если у SVG нет размеров, но задан viewBox, изображение займёт собой всё доступное пространство:

<svg viewBox="0 0 180 180">
  ...
</svg>

Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.

preserveAspectRatio

Как мы видели в примере выше, если у SVG заданы размеры и viewBox, содержимое будет сжиматься и растягиваться с сохранением пропорций, чтобы поместиться целиком, но этим поведением тоже можно управлять — с помощью свойства preserveAspectRatio (оно задаётся только атрибутом).

Например, с помощью значения none можно указать, что сохранять пропорции не нужно:

<svg width="350" height="200"
    viewBox="0 0 180 180"
    preserveAspectRatio="none"
    >
  ...
</svg>

SVG с viewBox и preserveAspectRatio='none' ведёт себя очень похоже на img: при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.

none будет полезно для резиновых фонов:

Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.

Выравнивание задаётся одним значением, определяющим положение по вертикали и по горизонтали, например: xMaxYMin. Для обеих осей можно задать положение в начале, в середине и в конце:

xMin, YMin — в начале оси
xMid, YMid — в середине
xMax, YMax — в конце

Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.

Поведение элемента определяется второй частью preserveAspectRatio. Возможные значения:

meet — содержимое стремится уместиться целиком (как фон с background-size: contain)
slice — содержимое заполняет собой всю область видимости (как background-size: cover: что не поместилось, обрежется)

Важно помнить, что preserveAspectRatio не работает без viewBox. viewBox задает область, которая должна масштабироваться, preserveAspectRatio определяет как именно она должна это делать.

Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).

Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.

Единицы измерения

Внутри SVG можно использовать em, ex, px, pt, pc, cm, mm, in, проценты, а также единицы системы координат (user space units). Единицы системы координат соответствуют пикселям, поэтому для значений в пикселях единицы измерения указывать не нужно.

Системы координат

В SVG-документе есть две системы координат:

1. Система координат области отрисовки — viewport space.
2. Система координат содержимого — user space.

Отсчет системы координат вьюпорта начинается от левого верхнего угла вьюпорта, системы координат содержимого — от левого верхнего края вьюбокса.

По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.

Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):

Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.

Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:

Если такое поведение нежелательно, это можно исправить с помощью свойства vector-effect со значением non-scaling-stroke, оно добавляется к содержимому SVG:

<circle r="60" cx="75" cy="75"
  stroke="black" stroke-width="1"
  vector-effect="non-scaling-stroke"/>

vector-effect можно задавать как атрибутом, так и в CSS.

Также новая система координат создается при добавлении трансформаций:

Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.

Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:

• Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
• Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute
• Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports

The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming RWD Summit as well! Here, she shares an epic guide to scaling SVG, covering all the ways you might want to do that. It’s not nearly as straightforward as scaling raster graphics, but that can be good, because it opens up interesting possibilities.

You’ve made the decision. You’re finally going to do it. This year, you are going to start using SVG in your web designs. You create a fabulous header logo in Inkscape and you copy and paste the SVG code it spits out into your WordPress header file. Of course, you’re not giving up on last year’s resolution to always use responsive design, so you set svg.banner { width: 100%; height: auto; } in your CSS and you think you’re set.

Until you open up your web page in test browsers and discover that some leave huge blocks of whitespace above and below the image, while others crop it off too short.

SVG stands for Scalable Vector Graphics. So, scaling SVG should be easy, right? Isn’t that what the SVG advocates have been saying all along, that SVG looks good at any size? It is, but yet it isn’t. SVG looks great at any scale, but it can scale in so many different ways that getting it to behave just the way you want can be confusing for SVG beginners. It doesn’t help that browsers have only recently started to adopt a standard approach to sizing inline SVG content.

SVG is not (just) an image

Part of the reason that scaling SVG is so difficult is because we have a certain idea about how images should scale, and SVG doesn’t behave in the same way.

Raster images like JPG, PNG, and GIF, have a clearly defined size. The image file describes how the browser should color in a grid that is a certain number of pixels wide and a certain number of pixels tall. An important side effect is that raster images have a clearly defined aspect ratio: the ratio of width to height.

You can force the browser to draw a raster image at a different size than its intrinsic height and width, but if you force it to a different aspect ratio, things will get distorted. For this reason, since the early days of the web there has been support for auto scaling on images: you set the height or the width, and the browser adjusts the other dimension so that the aspect ratio stays constant.

Scaling raster images also applies when they are used as a backgrouund-image, only we use the object-fit property for sizing and cropping.

SVG images, in contrast, can be drawn at any pixel size, so they don’t need a clearly defined height or width. And they won’t always have a clearly defined aspect ratio. You’re going to need to explicitly provide this information (and more) if you want the SVG to scale to fit the dimensions you give it.

If you don’t, SVG won’t scale at all. The following example uses inline SVG, adjusting the dimensions of the element (dotted line), without ever altering the size of the drawn graphic:

Why does it behave this way? Because SVG isn’t (just) an image. SVG is a document. Although the above example uses inline SVG, it could just as easily have used <object> or <iframe>. It would look the exact same even if you used <img>tags to embed the same SVG code.

When you include an HTML file with an <iframe>, you don’t expect the text inside to scale when you change the size of the frame. Same with SVG. By default, it will be drawn at the size specified in the code, regardless of the size of the canvas.What happens if you set the height or width (or both) to auto for these SVGs? The default size for HTML replaced elements will be used: 300px wide, 150px tall. This applies for <img>, <object> or <iframe>. The default 300×150 size also applies to inline <svg> elements within HTML documents, but that’s a relatively recent consensus from the HTML5 specifications: other browsers will by default expand inline SVG to the full size of the viewport—equivalent to width: 100vw; height: 100vh; — which is the default size for SVG files that are opened directly in their own browser tab. Internet Explorer cuts the difference, using width of 100% and height of 150px for images and inline SVG.

In other words, even if you think 300×150 is a perfect image size (though why would you?), don’t rely on having a default size for <svg> in HTML.

In addition to deciding what size you want your SVG to be, you’re also going to have to decide how you want your graphic to scale to fit that size. Below, I describe the code you need to get the scale you want for the most common situations:

• Scaling to fit a certain size, without distorting the image
• Scaling to fit a certain size, stretching or compressing the graphic as necessary
• Scaling to fit the available width, while maintaining the width-to-height aspect ratio
• Scaling in non-uniform ways, so that some parts of the graphic scale differently from others

But first: If you want to take control of the scale of your SVG, you’re going to need to familiarize yourself with the SVG scaling attributes and other tools available.

The SVG Scaling Toolbox

Other images scale because the browser knows the height, width, and aspect ratio of the image, and it adjusts everything together. Giving SVG these properties is the first step to getting it to scale. However, scaling SVG goes beyond what is possible with other images.

The height and width attributes

A first glance at the SVG specifications would suggest that the height and widthattributes on the top-level svg element will implicitly set an aspect ratio and therefore make SVG scale like other images. It’s true that setting height and width will override the default dimensions when you use SVG as an image. But of course it’s not that easy:

• If you use an <img> to embed your SVG, setting height and width will make the SVG scale predictably in most browsers, but not in Internet Explorer. With CSS like img { width: 100%; height: auto; }, IE will auto-scale the image area to keep the width:height aspect ratio constant, but it won’t scale the actual drawing to match the scale of the image dimensions.
• If you use an <object>, <embed>, or <iframe> to embed your SVG, setting height and width on the <svg> won’t change the size of the frame; you’ll just get scrollbars inside your iframe if the SVG is too big.
• If you use inline SVG (i.e., <svg> directly in your HTML5 code), then the <svg>element does double duty, defining the image area within the web page as well as within the SVG. Any height or width you set for the SVG with CSS will override the height and width attributes on the <svg>. So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG. Which, as mentioned above, will be either 150px or 100vh, depending on the browser.

So forget height and width. You don’t actually want to set the exact height and width anyway, you want the SVG to scale to match the width and/or height you set in the CSS. What you want is to set an aspect ratio for the image, and have the drawing scale to fit. You want a viewBox.

The viewBox attribute

The SVG viewBox is a whole lot of magic rolled up in one little attribute. It’s the final piece that makes vector graphics Scalable Vector Graphics. The viewBox does many things:

• It defines the aspect ratio of the image.
• It defines how all the lengths and coordinates used inside the SVG should be scaled to fit the total space available.
• It defines the origin of the SVG coordinate system, the point where x=0 and y=0.

The viewBox is an attribute of the <svg> element. Its value is a list of four numbers, separated by whitespace or commas: x, y, width, height. The width is the width in user coordinates/px units, within the SVG code, that should be scaled to fill the width of the area into which you’re drawing your SVG (the viewport in SVG lingo). Likewise, the height is the number of px/coordinates that should be scaled to fill the available height. Even if your SVG code uses other units, such as inches or centimeters, these will also be scaled to match the overall scale created by the viewBox.

The x and y numbers specify the coordinate, in the scaled viewBox coordinate system, to use for the top left corner of the SVG viewport. (Coordinates increase left-to-right and top-to-bottom, the same as for identifying page locations in JavaScript). For simple scaling, you can set both values to 0. However, the x and y values are useful for two purposes: to create a coordinate system with an origin centered in the drawing (this can make defining and transforming shapes easier), or to crop an image tighter than it was originally defined.

Some example viewBox values:

• viewBox="0 0 100 100": Defines a coordinate system 100 units wide and 100 units high. In other words, if your SVG contains a circle centered in the graphic with radius of 50px, it would fill up the height or width of the SVG image, even if the image was displayed full screen. If your SVG contained a rectangle with height="1in", it would also nearly fill up the screen, because 1 inch = 96px in CSS, and all lengths will get scaled equally.
• viewBox="5 0 90 100": Almost the same view, but cropped in by 5% on the left and right, so that the total width=90 units and the x-coordinate on the left=5.
• viewBox="-50 -50 100 100": A view with the same scale, but now with the top-left corner given the coordinates (-50, -50). Which means that the bottom-rightcorner has the coordinates (+50, +50). Any shapes drawn at (100, 100) will be far offscreen. If you wanted to draw a circle that completely filled the image area, it would be centered at (0, 0).

Once you add a viewBox to your <svg> (and editors like Inkscape and Illustrator will add it by default), you can use that SVG file as an image, or as inline SVG code, and it will scale perfectly to fit within whatever size you give it. However, it still won’t scale quite like any other image. By default, it will not be stretched or distorted if you give it dimensions that don’t match the aspect ratio. Instead, the scale will be adjusted in order to preserve the aspect ratio defined in the code.

The preserveAspectRatio attribute

The viewBox attribute has a sidekick, preserveAspectRatio. It has no effect unless a viewBox exists to define the aspect ratio of the image. When there is a viewBox, preserveAspectRatio describes how the image should scale if the aspect ratio of the viewBox doesn’t match the aspect ratio of the viewport. Most of the time, the default behavior works pretty well: the image is scaled until it just fits both the height and width, and it is centered within any extra space.

Just like viewBox, preserveAspectRatio has a lot of information in a single attribute. The default behavior can be explicitly set with preserveAspectRatio="xMidYMid meet". The first part, xMidYMid tells the browser to center the scaled viewBox region within the available viewport region, in both the x and y directions. You can replace Mid with Min or Max to align the graphic flush against one side or the other. Watch the camelCase capitalization, though: SVG is XML, and is therefore case sensitive. The x is lowercase but the Y is capital.

The second half of the default preserveAspectRatio, meet, is the part that tells the browser to scale the graphic until it just fits both height and width. It’s equivalent for CSS background images is background-size: contain;. The alternative value for SVG is slice (equivalent to background-size: cover;). A slice value will scale the image to fit the more generous dimension, and slice off the extra. Except, it doesn’t necessarily slice off the extra; that depends on the value of the overflow property.

If you wish every image could be centered in the dimensions you give it, instead of getting stretched or distorted, the new object-fit CSS property allows you to do the same with other image types.

There’s also preserveAspectRatio="none" option to allow your SVG to scale exactly like a raster image (but with much better resolution), stretching or squishing to fit the height and width you give it.

How to Scale SVG to Fit within a Certain Size (without distorting the image)

Probably the most common requirement is to have an SVG icon scale to fit a specific size, without distortion. The viewBox attribute is really all you need here, although you can use preserveAspectRatio to adjust the alignment.

As mentioned, if you’re creating your SVG in a graphical editor, it’s probably already including a viewBox. However, you may want to adjust the viewBox to get the positioning just right. The pot-of-gold graphic has been given a viewBox="0 0 60 55" for the rest of the examples. That leaves some extra space around it; to create a tight-cropped icon, you could use viewBox="4.5 1.5 51 49". The following example also shows the effect of the default preserveAspectRatio, centering the graphic in the space provided:

How to Scale SVG to Fit the Available Width (and adjust the height to match)

SVG with a viewBox will scale to fit the height and width you give it. But what about auto-sizing? With raster images, you can set width or height, and have the other scale to match. Can SVG do that?

It can, but it gets complicated. There are a couple different approaches to chose from, depending on how you are including your SVG.

Option 1: Use image auto-sizing

When an SVG file has a viewBox, and it is embedded within an <img>, browsers will (nearly always) scale the image to match the aspect ratio defined in the viewBox.

Internet Explorer, however, remains the bane of SVG. Although it normally works just fine, I used display: table-cell to lay out the figures in an earlier version of this example, and IE distorted the images in weird ways.

If you completely auto-size the image, Internet Explorer applies the standard default 300×150 size. However, other browsers will apply { width: 100%; height: auto; } by default if the image has a viewBox; this behaviour is not defined in any specification.

So to recap: To auto-scale SVG used as <img>, 

1. Set a viewBox attribute.
2. Set at least one of height or width.
3. Don’t put it inside a table layout if you care about supporting Internet Explorer.

Option 2: Use CSS Background Images and the padding-bottom Hack

For the most part, using SVG as a CSS background image works much the same way as using it in an <img> (but with the added benefit that you can define raster fallbacks for old browsers). There are a few bugs with older browsers scaling the image after converting it to raster instead of before (i.e. pixelating it), but for the most part the viewBox is all you need.

However, auto-sizing isn’t an option for CSS background images; after all, the image is supposed to be secondary to the HTML content of the element. If you want the element to exactly match the aspect ratio of the image you’re going to use, you’re going to have to hack it a little bit.

There are a select number of CSS properties that allow you to adjust height-based attributes based on the available width. If you set the border, padding, or margin of a block-layout element to percentage values, the percentages will be calculated relative to the available width of the container, even for the top and bottom borders, padding, and margin.

The intended purpose is to create evenly-sized borders and padding even when height is automatic. But that’s beside the point. For our purposes, the key point is that you can adjust the total height of an element in proportion to the width. In other words, you can control the aspect ratio. To create a <div> with 100% width that exactly matches the 4:3 aspect ratio of an image you’re using as its background, you can use:

.ratio4-3 {
 width: 100%;
 background-image: url(image-with-4-3-aspect-ratio.svg);
 background-size: cover;
 height: 0;
 padding: 0; /* reset */
 padding-bottom: calc(100% * 3 / 4);
}

Things to note:

• To get the desired height as a percentage of the available width, you multiply the percentage width by the desired height factor, divided by the desired width factor.
• If you want to support browsers that don’t support calc(), you’ll need to do the math yourself (or with a CSS pre-processor).
• If you by default set every element to box-sizing: border-box, you’ll have to re-set it to use box-sizing: content-box. We want it to be height: 0 pluspadding, after all.
• The padding-bottom property is used instead of padding-top because of problems in IE5. Although you’re probably not worried about supporting IE5, you might as well be consistent. It is called the padding-bottom hack, after all.

For the pot-of-gold image, the aspect ratio was 60:55, which works out as bottom padding of 92%. In action, it looks like this:

Option 3: Use Inline SVG and the latest Blink/Firefox Browsers

SVG images are nice, but in many cases you’ll prefer to use inline SVG. Inline SVG reduces the number of HTTP requests, allows user interactions, and can be modified by the CSS in your main web page. But will it scale?

It will if you’re using the latest Firefox or Blink browsers. Just set the viewBox on your <svg>, and set one of height or width to auto. The browser will adjust it so that the overall aspect ratio matches the viewBox. Beautiful.

But chances are, these aren’t the only browsers you need to support.

Many browsers—IE, Safari, and versions of Opera and Chrome released prior to summer 2014—will not auto-size inline SVG. If you don’t specify both height and width, these browsers will apply their usual default sizes, which as mentioned previously will be different for different browsers. The image will scale to fit inside that height or width, again leaving extra whitespace around it. Again, there are also inconsistencies in what happens if you leave both height and width auto.

The solution is to again use the padding-bottom hack to control the aspect ratio yourself. The easiest approach, which works for inline SVG as well as <object>, <iframe> and other replaced elements like <video>, is to use a container element.

Option 4: Use the padding-bottom Hack on a Container

To use a container <div>, add classes or inline styles to the div to give it the correct aspect ratio, as was done above when using a background image. But also set position: relative on the container, so that it will become the reference frame for absolutely positioned content. Then set the SVG (or other object) to position: absolute, with height and width of 100%. The absolute positioning is required so that the percentages will be calculated relative to the height of the <div> includingthe padding, and not relative to the zero-height content area.

Unless you have a lot of graphics with the same aspect ratio, it usually makes sense to declare the padding-bottom inline, so that it is right next to the viewBox it needs to match:

<div class="scaling-svg-container" 
   style="padding-bottom: 92% /* 100% * 55/60 */">
  <svg class="scaling-svg" viewBox="0 0 60 55">
    <!-- SVG content -->
  </svg>
</div>

.scaling-svg-container {
 position: relative; 
 height: 0; 
 width: 100%; 
 padding: 0;
 padding-bottom: 100%; 
 /* override this inline for aspect ratio other than square */
}
.scaling-svg {
 position: absolute; 
 height: 100%; 
 width: 100%; 
 left: 0; 
 top: 0;
}

The container approach works, but at the cost of an extra wrapper element in your markup. And it isn’t a general-purpose container, either: it’s a container that has to be customized to the exact aspect ratio your SVG needs. Things get even trickier if you don’t want it to scale to a full 100%; you’ll need to use another wrapper <div>to set the desired width and other positioning attributes. I personally would rather keep all information about the SVG aspect ratio in the SVG code itself. To do that for inline SVG, you’re going to need to tell the browser to draw outside the lines, and into the padding.

Option 5: Use the padding-bottom Hack on an Inline <svg> Element

To use the padding-bottom hack to control the aspect ratio of the total <svg> area, the official height is going to be (essentially) zero. With the default preserveAspectRatio value, the graphic would be scaled down to nothing. Instead, you want your graphic to stretch to cover the entire width you give it, and to spill out onto the padding area you have carefully set to the correct aspect ratio.

Again, I like to use inline styles for the padding-bottom aspect ratio, since it needs to be customized to the viewBox attribute. In the example that follows, I also use it for the other style properties, although you could use a class if you have many graphics that need the same effects:

<svg viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice"
   style="width: 100%; padding-bottom: 92%; height: 1px; overflow: visible">
  <!-- SVG content -->
</svg>

There are a few other details in there:

• The height is 1px, not 0, otherwise the SVG may not be drawn at all (Firefox) or may not scale at all (Chrome).
• The preserveAspectRatio uses YMin for the vertical alignment, so that the graphic is aligned neatly against the top of the <svg> content area, spilling out into the bottom padding.
• Although overflow: visible may be the default for HTML, it needs to be set explicitly for SVG.

If you want the SVG to scale to some percentage less than 100% width, remember to adjust padding-bottom accordingly. Or use a wrapper <div> to set the size.

How to Scale, Stretch, and Squish SVG to Exactly Fit a Certain Size

Although preserving the aspect ratio is usually desirable, sometimes the image is an abstract or flexible image that you want to stretch to fit.

Option 1: Use percentages

One option to stretch to fit is to use percentage values for all size and position attributes in the SVG.

Things to note about percentages and SVG:

• If you’re using percentages to stretch and squish, don’t include a viewBox(although you can specify default height and width).
• Some lengths in SVG aren’t clearly associated with either height or width; for example, the radius of a circle. If you use percentage values in these cases, the length will be calculated as a geometric average (square root of the sum of the squares, divided by square root of 2) of the equivalent percentage of height and width. This preserves the Pythagorean theorem relationship of diagonal lines to rectangular lines, but is otherwise somewhat confusing.
• Many lengths in SVG cannot be specified with percentages, most importantly the coordinates of <path> and <polygon> elements.

Option 2: Use preserveAspectRatio="none"

If you want a flexibly scaling SVG that also includes SVG paths, you need to use a viewBox plus preserveAspectRatio="none". Here’s a slightly fancier version of that rainbow, with puffy cloud s:

Be aware that with preserveAspectRatio="none", everything gets stretched or squished equally, just as if you were unevenly scaling other image types. That means that circles get stretched into ellipses, and text will be distorted as well. To avoid that, you’ll need to use a mixture of scaling approaches.

How to Scale Parts of an SVG Separately

The viewBox and preserveAspectRatio attributes are incredibly flexible. Once you stop thinking of SVG as just another image format, you can start asking yourself how you want your graphic to scale as the window changes size.

An important thing to realize is that you don’t need to define a single viewBox and preserveAspectRatio option for the entire SVG. Instead, you can use nested <svg> elements, each with their own scaling attributes, to have different parts of your graphic scale independently. (You can also use these attributes on <symbol>and <pattern> elements, and you can use preserveAspectRatio on other images embedded in your SVG.) With this approach, you can create a header graphic that stretches to fill a widescreen display without taking excessive height as well:

SVG может быть встроен в веб-страницу множеством способов; однин из них — использование HTML5 тэга <svg>. Другие способы включают в себя встраивание SVG при помощи тэгов <img>, <object>, а так же, используя iframe, либо как фон при помощи CSS.

В принципе, задавать масштаб SVG должно быть так же просто, как выставлять любое значение высоты или ширины контейнера. Однако, в силу разных настроек браузеров, сделать SVG адаптивным не так-то просто.

Тем не менее, существуют определенные уловки, которые мы можем воспользоваться для достижения нужного результата. В этой статье мы рассмотрим несколько способов, которые помогут сделать SVG адаптивными.

Как сделать SVG «резиновыми» при помощи CSS

Для того чтобы заставить SVG быть «резиновым», прежде всего необходимо удалить атрибуты height и width. Когда указаны точные значения высоты и ширины SVG никак не сможет автоматически растягиватся. Стоит, однако, оставить атрибут viewBox. После очистки свойств высоты и ширины SVG можно вставить на страницу одним из нескольких способов.

Встраивание SVG при помощи <img>

Когда SVG встроен как изображение при помощи тэга <img> высота и ширина, указанные в тэге используются браузером для контроля размеров SVG. Содержимое SVG затем располагается внутри окна просмотра в зависимости от значения viewBox, указанного в <svg>.

<img src="my_SVG_file.svg" alt="Image description." /><img src="my_SVG_file.svg" alt="Image description." />

Обычно браузеры достаточно функциональны для определения ширины и высоты SVG даже если не указывать ширину и высоту <img> элемента. Например, если вам нужно поместить img в div без указания высоты и ширины, Chrome и Firefox решат, что ширина img = 100%; SVG затем растягивается для заполнения содержащего div, и его высота соответствующе подгоняется для сохранения пропорций. Затем изменяется размер самого div-а, а img SVG подгоняется под него. Однако при работе с растровым изображением, например рисунком PNG это бы не проканало; в этом случае нам бы пришлось специально задавать ширину img в 100% при помощи CSS.

В Internet Explorer дела обстоят по-другому. Если не указывать ширину img, браузер решит, что высота равняется 150px, так этот размер указан в CSS спецификации как стандартный; стандартная ширина изображения равняется 300px. Затем SVG располагается внутри содержащего div так, что его высота равна 150px; хотя предполагается что ширина будет 100%; SVG принимает высоту всегда 150px независимо от того, насколько широким становится контейнер, что в результате приводит к широким белым пробелам с обеих сторон. Чтобы разобраться с этим вопросом в IE достаточно специально задавать ширину img в 100%. Эти результаты были получены в следствие тестов, проведенных в Internet Explorer 9 и 11.

Таким образом, для того чтобы сделать SVG “резиновым”, сначала необходимо удалить значения высоты и ширины, указанных в <svg>, а затем добавить одну строчку CSS для Internet Explorer:Таким образом, для того чтобы сделать SVG “резиновым”, сначала необходимо удалить значения высоты и ширины, указанных в <svg>, а затем добавить одну строчку CSS для Internet Explorer:

/* fix for IE */
img {
    width: 100%;
}

Обратите внимание, что если вы решите задать ширину и высоту тэгу <img> более чем 100%, то размер SVG будет расчитан как будто ширина и высота были заданы непосредственно <svg> элементу.

Встраивание SVG при помощи <object>

Встраивание SVG через <object>, во многом похоже на тот же самый процесс при работе с <img>.

<object type="image/svg+xml" data="my_SVG_file.svg">
    <!-- fallback here (<img> referencing a PNG version of the graphic, for example) -->
</object>

Так же, как и с тэгом img, Firefox и Chrome определяют ширину SVG-объекта в 100% и высота изменяется пропорционально увеличению ширины экрана. Если же object-у задать ширину и высоту, то SVG-графика поместится в отдельную область просмотра с заданными размерами.

В случае с Internet Explorer возникает та же проблема, о которой мы упоминали ранее, когда высота SVG по умолчанию равна 150px. Проблема также устраняется путем задания ширины в 100%:

/* fix for IE */
object {
    width: 100%;
}

Встраивание SVG при помощи <iframe>

<iframe> очень похож по своему функционированию и особенностях на <object>.

<iframe src="my_SVG_file.svg">
    <!-- fallback here (<img> referencing a PNG version of the graphic, for example) -->
</iframe>

Однако браузеры реагируют на данный способ по-разному. На сегодняшний день Chrome, Firefox и Internet Explorer выставляют вставленному в iframe SVG: 300px ширины и 150px высоты. В предыдущих случаях, когда IE использовал стандартную высоту 150px, он использовал ширину в 100%. Однако когда речь идёт об iframe все три браузера устанавливают высоту и ширину iframe’а в фиксированном размере 300px на 150px.

Применение width:100% растягивает iframe для заполнения ширины контейнера, однако высота не меняется – она по-прежнему равна 150px; даже когда контейнер и iframe уменьшаются до ширины меньшей, чем оригинальная ширина SVG, iframe по-прежнему поддерживает высотку в 150рх, приводя к появлению белых пробелов сверху и снизу SVG-изображения. Это происходит во всех трёх браузерах.

Единственный способ изменить высоту SVG – точно задать ее на iframe. Высота затем, конечно, вместе с шириной сформирует окно просмотра, внутри которого будет расположен SVG. Если вы хотите, чтобы SVG поместился внутри окна просмотра без всяких белых пробелов над/под или по сторонам, необходимо будет удостовериться в том, что заданные высота и ширина окна просмотра (iframe) соответствуют соотношению высоты и ширины SVG-изображения.

Не существует “стандартного” способа создать элемент с конкретным соотношением высоты-ширины в CSS. Однако, несколько лет назад Тьерри Кобленц разместил статью на A List Apart, в которой описывается прием, который сегодня известен как Хак заполнения; хак, позволяющий создавать внутренние соотношения для видео и iframe-ов.

Идея padding hack’а заключается в использовании отношения внутренних отступов элемента к его ширине. Когда внутрение отступы установлены в процентном соотношении, проценты вычисляются относительно ширины элемента, даже если мы выставили только верхний внутренний отступ. Аналогичный прием можно использовать в случае с SVG, чтобы сделать элемент “резиновым”. Ниже описаны шаги для достижения нужного нам эффекта.

Пусть тестовый SVG выглядит вот так:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="194" height="186" viewBox="0 0 194 186">
    <!-- SVG content -->
</svg>

Padding hack – Шаг 1

Для того чтобы сделать SVG адаптивным, когда он встроен в iframe необходимо сделать то же самое, что мы делали ранее: убрать атрибуты height и width из <svg> элемента.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    <!-- SVG content -->
</svg>

Padding hack – Шаг 2

Далее, убедимся в том, что задали атрибут viewBox. В большинстве случаев SVG будет иметь указанный viewBox.

Нет необходимости специально задавайте preserveAspectRatio так как его стандартное значение (xMidYMid meet) является значением, которое нам вполне подходит. Поэтому нет необходимости задавть его, если только значение preserveAspectRatio не должно быть оличным от стандартного.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" preserveAspectRatio="xMidYMid meet">
    <!-- SVG content -->
</svg>

Padding hack – Шаг 3

Для того, чтобы padding hack сработал, SVG необходимо поместить в контейнер. Для этой цели нам подойдёт элемент div. Этот контейнер получит внутреннее соотношение при помощи padding hack’а (следующий шаг), и затем iframe будет автоматически масштабирован внутри контейнера.

<!-- wrap svg in a container -->
<div class="container">
    <iframe src="my_SVG_file.svg">
        <!-- fallback here -->
    </iframe>
</div>

Padding hack – Шаг 4

Далее, мы применяем несколько стилей к контейнеру соблюдая следующие правила:

.container {
    height: 0;
    width: width-value;
    padding-top: (svg height / svg width) * width-value;
    position: relative;
}

Итак, что конкретно делают вышеуказанные правила?

Во-первых, мы сбрасываем значение высоты контейнера. Так как внутренние отступы рассчитывается относительно ширины элемента, нам понадобится задать их относительно элемента для его повторного расширения по вертикали.

После того, как мы указали ширину контейнера – которая должна автоматически растягиваться, используя процентное значение, задаём значение верхнего внутреннего (или нижнего) отступа контейнера при помощи следующей формулы. Эта формула использует значения атрибутов <svg> height и width, которые мы убрали в Шаге 1) для указания значения заполнения, которое позволит внуреннему отступ контейнера соответствовать размерам svg.

В нашем логотипе ширина svg составляет 194px, а высота – 186рх. Я установил ширину контейнера на 50% чтобы он занимал половину доступного горизонтального пространства. Примененное к контейнеру заполнение равняется (186 / 194) * 50 = 48%. То есть, код для контейнера выглядит вот так:

.container {
    width: 50%;
    height: 0;
    padding-top: 48%;
    position: relative;
}

Так как высота контейнера была сбита и мы выставили большое знаечение верхнему внутреннему отступу, то содержимое будет смещено вниз.

Чтобы «вытянуть» SVG обратно мы разместим iframe внутри контейнера. Тут вступает в игру position: relative, что помогает выставить правильную позицию для SVG.

Padding hack – Шаг 5

Теперь, когда у нас есть позиционируемый контекст, разместим iframe внутри контейнера и выставим его размеры таким образом, чтобы они совпадали с высотой и шириной контейнера:

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Это всё, что необходимо для того чтобы сделать SVG адаптивным. iframe отображается в стандартной рамке, от которой по всей видимости вы захотите избавиться. Для этого достаточно добавить одно правило: border: none;

Встраивание SVG при помощи <svg>Встраивание SVG при помощи <svg>

SVG может быть встроен в HTML документ при помощи тега <svg>.

<!-- Note: the xmlns is not required in an HTML5 document -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    <!-- SVG content -->
</svg>

Ширина и высота встроенного окно просмотра svg будет такой же, какую вы задали непостредственно <svg> элементу. Когда атрибуты ширины и высоты убраны все браузеры будут воспринимать ширину равной 100% и растягивать SVG по горизонтали чтобы заполнить ширину контейнера.

В Chrome и Firefox высота SVG рассчитывается как раз так, как нам нужно. В этом случае адаптивность достигается без особых потерь.

В Internet Explorer (проверено на версиях 9 и 11) высота снова равна 150рх, а ширина 100%. Как и в предыдущих случаях, при изменении размера экрана, сверху и снизу SVG появится белое пространство. При использовании img было достаточно указать width: 100%; однако, выставив ширину в 100% самому svg такой же эффект не будет достигнут. В этом случае лучшим решением будет применение padding hack-а.

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
        <!-- SVG content -->
    </svg>
</div>

.container {
    width: 50%;
    height: 0;
    padding-top: 48%;
    position: relative;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

SVG встроенный как фоновый рисунок при помощи CSS

Одним из популярных способов встраивания SVG является использование фонового рисунка:

.element {
    background-image: url(my_SVG_image.svg);
    /* other styles */
}

К счастью, нам не нужно применять никакие фиксы или хаки чтобы заставить фоновый рисунок SVG вести себя как необходимо — фоновый рисунок SVG может быть расположен, наложен, изменен в размере и масштабирован как любой фоновый рисунок.

Делаем SVG адаптивными при помощи CSS медиа запросов

Тот факт, что графические элементы внутри SVG создаются при помощи XML, делает работу с SVG очень удобной. Так как SVG-контент состоит из XML тэгов, которые отображают графику мы можем выбирать отдельные элементы и применять к ним конкретные стили точно так же, как мы выбираем элементы HTML, используя CSS селекторы.

Элементы SVG обычно стилизуются при помощи презентационных атрибутов вроде fill, stroke, transform и других. Однако только подмножество всех презентационных атрибутов может быть задано при помощи CSS. Вы можете найти список задаваемых стилей, в спецификации стилей SVG. Список задаваемых при помощи свойств CSS атрибутов на данный момент не включает атрибуты x, y, width и height; однако эта четвёрка будет добавлена в список, и мы сможем задавать их при помощи CSS.

Некоторые из самых часто задаваемых свойств: fill, который работает подобно фоновому цвету; stroke, который схож с border; opacity, display, transform и некоторые другие.

Далее мы добавим медиа запросы внутрь тэга <style> внутри <svg>:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    <style>
        /* CSS styles and media queries here */
    </style>
    <!-- SVG elements here -->
</svg>

Вот так вставляем логотип:

<img src="logo.svg" alt="Logo" />

Пора отметить, что размеры, указанные в медиа запросах, ссылаются на размеры окна просмотра SVG. В зависимости от способа, которым вы встраиваете SVG, окно просмотра может быть либо размера самого <svg> (для встроенных SVG), либо размера ссылаемого SVG элемента.

У каждого из элементов внутри SVG есть ID, который мы можем использовать в CSS:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    <path id="curved_bg" fill="#195463" d="..."/>
    <g id="primary_content" fill="#ECECEC">
        <path id="icon" d="..."/>
        <path id="inner-circle" d="..."/>
        <path id="middle-circle" d="..."/>
    </g><!-- /primary content -->
    <g id="secondary_content" fill="#ECECEC">
        <path id="bottom-text" d="..."/>
        <path id="upper-text" d="..."/>
        <path id="outer-circle" d="..."/>
        <circle id="left-dot" cx="31.1" cy="91.5" r="3"/>
        <circle id="right-dot" cx="163.4" cy="91.5" r="3"/>
    </g><!-- end secondary content -->
</svg>

Используя <style> внутри SVG, мы создаём медиа запросы, которые изменят стили в зависимости от размера окна. SVG изменится как показано на изображениях ниже:

Мы будем использовать свойства CSS fill и opacity. Уменьшая размер окна, фон логотипа исчезнет, а цвет заполнения поменяется с белого на тёмно-синий. По мере того, как экран уменьшается, текстовая часть логотипа убирается, чтобы занимать меньше экранного пространства. И, наконец, круг, охватывающий иконку, убирается и на очень маленьких экранах остается только иконка якоря.

Вместе с медиа запосами, наш SVG файл будет выглядеь следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    <style>
        svg * {
            transition: fill .1s ease-out, opacity .1s ease-out;
        }
        @media all and (max-width: 250px) {
            #curved_bg {
                opacity: 0;
            }
            #secondary_content, #primary_content {
                fill: #195463;
            }
        }
        @media all and (max-width: 200px) {
            #secondary_content {
                opacity: 0;
            }
        }
        @media all and (max-width: 150px) {
            #inner-circle, #middle-circle {
                opacity: 0;
            }
        }
    </style>
    <path id="curved_bg" fill="#195463" d="..."/>
    <!-- ... -->
</svg>

Изменение логотипа в зависимости от размеров экрана — тоже адаптивность. Некоторые логотипы компаний могут занимать слишком много пространства на маленьких экранах, поэтому мы всё чаще видим, как множество логотипов адаптируются, путем избавления от текстовой части. Без SVG этого можно было бы достигнуть путем переключения PNG на экранах различных размеров. Однако такой подход не очень эффективен, ведь вам потребуется хранить на сервере множество картинок. В данном случае явно видны преимущества SVG: гибкость в использовании и прекрасное отображение на экранах.

В завершении

С выходом всё новых и новых версий Chrome и Firefox, увеличивается поддержка SVG, поэтому информация в данной статье в какой-то момент может стать не актуальна. Internet Explorer как всегда замедляет всю движуху, поэтому упомянутые фиксы будут актуальны долгое время.

Как поставить или извинить svg width и height

Загрузку svg векторной графики — мы выделили в отдельный пункт — оттуда возьмем экземпляр для экспериментов :

https://dwweb.ru/__img/__svg/bell/bell_95.svg

Выведем прямо здесь:

<img src=»https://dwweb.ru/__img/__svg/bell/bell_95.svg»>

Результат:
Как видим наш svg без width и height растянулся на всю ширину, которая доступна.

Зададим svg width и svg height

Как вы знаете есть «3 способа css» — воспользуемся одним из этих способов!

<img style=»width:50px;height:50px;» src=»https://dwweb.ru/__img/__svg/bell/bell_95.svg»>

Результат:

Изменить svg width и height если это код svg<

Выше приведенный пример не будем рассматривать, поскольку код этого svg очень большой, поэтому возьмем попроще — мы в одних из первых статьях рассматривали круг.

Зададим svg width и svg height прямо внутри кода

Возьмем код svg и зададим svg width и svg height прямо внутри кода :

<svg width=»100″ height=»100″><circle cx=»50″ cy=»50″ r=»50″ fill=»green»></svg>

Результат:

Изменим svg width и height

Заменим выше приведенные значения в нашем svg -выделено красным.

Результат изменения svg width и height

Как видим высота и ширина никак не повлияли на наш svg — блок внешний увеличился, а сама картинка нет!

В чем может быть проблема!?

Дело в том. что для данного svg — это у нас круг, нужно изменить некоторые параметры внутри кода svg.

Нам нужно изменить:

Html:

<svg width=»300″ height=»300″><circle cx=»150″ cy=»150″ r=»150″ fill=»green»></svg>

Результат изменения svg width и height

Не меняется высота(width) и ширина(height) у svg

Иногда ширина и высота svg не меняется при изменении width и height.

Давайте приведу пример:

Html:

<svg width=»25″ height=»25″> <path d=»M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z»/> </svg>

Результат:

Html:

<svg width=»125″ height=»125″> <path d=»M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z»/> </svg>

Результат:

Картинка svg не меняет высоту(width) и ширину(height)

Как видим, наружный размер изменился — я специально добавил бордюр. А картинка нет. Почему!?

Все просто!

Для картинок svg нужен атрибут «viewBox»!

Не буду подробно рассказывать о viewBox — это надо делать отдельную страницу.

Совсем кратко:

Первые два числа — координаты X и Y верхнего левого угла масштабируемой области, два других — её ширина и высота.

Изменим размер и позицию внутри обертки с размером «150», а то 50 — как-то совсем маловато…

Смотрим, что у нас получилось:

Html:

<svg width=»150″ height=»150″ viewBox=»1 2 22 20″> <path d=»M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z»></path> </svg>

Результат изменения высоты(width) и ширины(height) у svg

И далее

Когда у вас уже есть «viewBox» вы можете использовать «3 способа css», давайте изменим на 350 внутри тега:

Html:

<svg width=»350″ height=»350″ viewBox=»1 2 22 20″ fill=»red»> <path d=»M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z»></path> </svg>

Результат изменения высоты(width) и ширины(height) у svg