Css svg width auto

Содержание

How to make an svg scale with its parent container ?
Ширина
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feDropShadow
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
filter
foreignObject
image
mask
pattern
rect
svg
use
Спецификации
Found a content problem with this page?

How to make an svg scale with its parent container ?

SVG is the abbreviation for Scalable Vector Graphics. It is an Extensible Markup Language (XML) based vector image format for two-dimensional graphics. It supports interactivity and animation. This means that every attribute and every element present in the SVG file can be animated. SVG image behaviors are defined in XML text files. They can be searched, indexed, scripted, compressed, and can be created or edited using any text editor, as well as using drawing software such as Inkscape. Almost every modern web browser support SVG.

The reason why it is tricky to scale SVG is that it does not scale like the other image formats. SVG images have a clearly defined aspect ratio: the ratio of width to the height which makes it difficult to scale with the changing parent container. Other images scale easily because the browser determines the height, width, and aspect ratio of the image, and it adjusts everything accordingly. So giving these properties to SVG should be the first step to our requirement. Although setting height and width barely sets an aspect ratio but what we aim for is scaling which is beyond the aspect ratio. A viewbox can serve our purpose rightly. The viewBox is an attribute of the element which takes four parameters x, y, width, and height. x and y signify the origin of the SVG coordinate system and width and height signify the number of pixels or coordinates that should be scaled to fill the width and height respectively. Let us take a look at the following example:

Читайте также: Exercises html and css

First approach:

At first, we create a container that occupies 30% of the total width of the screen and 20% of the total height of the screen.
Next, we create an SVG image(rectangle) using the tag and specifying the height, width, and fill attributes.
The element wraps the rectangle image. The SVG element occupies 100% width of the parent container and its height is auto-adjusted depending on screen size. We use viewBox to make the SVG image scalable.
viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units.
Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally. Changing the x and y coordinates can yield different results, but we will keep ourselves restricted to the stated values.

Источник

Ширина

Атрибут width определяет горизонтальный размер элементов в пользовательской системе координат.

svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> rect x="0" y="0" width="0" height="90"/> rect x="0" y="100" width="60" height="90"/> rect x="0" y="200" width="100%" height="90"/> svg>