how to increase the size of an SVG file with HTML

Question

I created an SVG image with Inkscape and i can't make it bigger using HTML
THE SVG WAS CREATED OUTSIDE OF THE HTML, NOT IN THE HTML CODE ITSELF, I DID NOT USE
< SVG > TAGS
I used an < img > tag

<img src='images/picture.svg' \/>

whoa now... no need to shout. Did you export it as a png or did you keep it as svg? Also, the code where you include the image would be nice to see. — Joseph Marikle, Mar 05 '13 at 21:20
I haven't personally worked with svgs in HTML before but maybe this answer will help you? http://stackoverflow.com/questions/3120739/resizing-svg-in-html Sorry I can't be of more help than that. (Also as a side note, you have a misplaced `\` character in your img tag) — Joseph Marikle, Mar 05 '13 at 21:28
@VinnieCaprarola - You can answer your own question (you might have to wait a day or two), so make sure you post it as an answer, and mark it as accepted. — Shauna, Mar 05 '13 at 21:49

score 0 · Answer 1 · answered Mar 05 '13 at 21:20

0

You should be able to just style it like you would any other image. So something like this should work:

img {
  height: 100px;
  width: 100px;
}

answered Mar 05 '13 at 21:20

Shauna

9,495
2
37
54

i tried this, it makes the area (whitespace) around the image bigger, but not the image itself, and the whitespace just takes up space – vcapra1 Mar 05 '13 at 21:26

score 0 · Answer 2 · answered Mar 06 '13 at 03:52

Step 1) Make the SVG element on the page—however you have embedded it, be it inline <svg>, <img>, <object> or <embed>—the size that you want it to be.

Step 2) Set the viewBox attribute on your SVG element to define what content area should be scaled to fill the space.

how to increase the size of an SVG file with HTML

2 Answers2