Menu
Today, I have started to learn SVG and using it in HTML.
So, I created a file in SVG as follows:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 400 200">
<path d = "M0,100 L100,100 L125,50 L175,150 L225,50 L275,150 L300,100 L400,100"
style="
stroke: #000000;
stroke-width: 5;
fill: none;
"
/>
</svg>Then I tried to use it in html as image:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="menu">
<ul>
<li class="menu-item"><a href="#"><img src="svg/mysvg.svg" height="48" width="48"></img></a></li>
<li ...... />
<li ...... />
<li ...... />
</ul>
</div>
</body>
</html>
But I cannot see the svg as its not resized. What is my mistake? Can anybody point me to the right direction?
644
The problem is that viewBox has been written with a lower-case b. As a result, this parameter is not recognized by the browser. In an SVG without a viewBox attribute, all lengths are assumed to be in pixels, so resizing the SVG will have no effect.
If you change viewbox to viewBox, the SVG will scale so that the view box area matches the dimensions of the SVG (in much the same way as an ordinary embedded image).
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
