I have e.g. this SVG:
<svg><rect width="6" height="14" x="1" y="4" fill="currentColor"><animate id="svgSpinnersBarsFade0" fill="freeze" attributeName="opacity" begin="0;svgSpinnersBarsFade1.end-0.25s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.15s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3"><animate id="svgSpinnersBarsFade1" fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.3s" dur="0.75s" values="1;.2"></animate></rect></svg>
How can I scale it? I have tried using width
and height
attributes on the <svg>
, tried setting font-size
in hopes of it reacting to that, tried setting a viewbox
(which I still don’t get how it works). I’ve also tried putting it in a container element and style it via width: 100%; height: 100%;
. None of these attempts had any effect whatsoever.
Example:
svg { width: 100%; height: 100% }
<div style="width: 64px; height: 64px; background-color: #f8f8f8;">
<svg height="64" width="64" viewBox="0 0 64 64" style="font-size: 64px;"><rect width="6" height="14" x="1" y="4" fill="currentColor"><animate id="svgSpinnersBarsFade0" fill="freeze" attributeName="opacity" begin="0;svgSpinnersBarsFade1.end-0.25s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.15s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3"><animate id="svgSpinnersBarsFade1" fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.3s" dur="0.75s" values="1;.2"></animate></rect></svg>
</div>
I’d love someone to not only provide a solution, but also explain the basics behind this, and why none of my approaches is valid.
2
Answers
Just remove the width/height etc. from the SVG and it will scale to the bounding container depending on the
viewbox
.The
viewbox
defines the canvas dimensions for placement of the elements within. It has no relevance to the actual size of the SVG in the HTML.However, setting a width/height in the SVG will set the size until removed or overridden.
In your specific SVG, you aren’t actually using the whole canvas as the objects you place on it are essentially only using the top left corner. If you change the viewbox so they fill the SVG it looks quite different.
FYI, the "default" viewBox is
viewBox="0 0 300 150"
without a viewBox, the SVG gets a 300 x 150 pixel size in the HTML document
with a viewBox the SVG sizes to its container
For sanity, always use a viewBox
Libraries that set
width
andheigth
attributes on a SVG should be burnt,its like using
!important
in CSS (IMHO)Those
id
values in your SVG animation will get you in trouble when more SVGs use the sameid
And since I know you love Web Components as much as I do;
this one makes it easier to play with values
Note the viewBox y value. the viewBox "shifts" upward so the
rect
does NOT need any=2
value since the default isy=0