Menu
I just like images I want to separate the picture from the page. I can take a 1024x768 image and do this
<img src="1024x768.jpg" width="400" height="300"/>
or I can do this
<img src="1024x768.jpg" style="width:400px; height:300px"/>
and the image will be scaled not cropped. How do I do the same with svg? Note: I don't want to embed the svg directly into the page. That would be as stupid as using dataURLs for all my images. My artists edit images, other people edit html so I need those to be separate.
<embed src="somefile.svg" width="400" height="300"></embed>
Does not scale the svg, it just crops. CSS width/height doesn't work either. This there a way to do this similar to images?
910
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.
You should set the viewBox attribute first, and then make all of your dimensions within your svg relative to that. When you assign height and width (whether in your svg tag or in your css) you are adjusting the size of the svg bounding box, not the size of the elements within it.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.
Set the CSS attribute position:absolute on your <svg> element to cause it to sit inside and fill your div. (If necessary, also apply left:0; top:0; width:100%; height:100% .)
okay, apparently you can just use svg in an img tag
<img src="somefile.svg" width="200"/>
And it works in IE9+, FF4+, Chrome4+, Safari4+, Opera 9.
181
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