CODEWITHSUNDEEP
htmlsvg
J.R.
J.R.

Reputation: 6069

Resizing SVG in HTML?

I have an SVG file inside HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it.

I know with a JPEG or whatever I could have it stored as a 50 by 50 icon, then actually display it as a (rather pixelated) 100 by 100 thumbnail (or 10 by 10), by manually setting the height and width in the image_src tag.

However, SVG files seem to be used with object/embed tags, and changing the height or width of THOSE just results in more space being allocated for the picture.

Is there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?

Upvotes: 265

Views: 575326

Answers (8)

Lawrence Whiteside
Lawrence Whiteside

Reputation: 2654

Here is an example of getting the bounds using svg.getBox().

At the end you get numbers that you can plug into the SVG to set the viewbox properly. Then use any CSS on the parent div and you're done.

// get all SVG objects in the DOM
var svgs = document.getElementsByTagName("svg");
var svg = svgs[0];
var box = svg.getBBox(); // <- get the visual boundary required to view all children
var viewBox = [box.x, box.y, box.width, box.height].join(" ");

// set viewable area based on value above
svg.setAttribute("viewBox", viewBox);

Upvotes: 5

Ronnie Smith
Ronnie Smith

Reputation: 18585

Remove height and width attributes in the svg element. Add a viewBox attribute, for example viewBox 0 0 100 100, then use plain old CSS height or width to scale the svg element.

NOTE: the viewBox attribute is case sensitive. If you use a lowercase b it will not work.

.fifty {
    height: 50px;
}
.hundred {
    height: 100px;
}
<h3>50x50</h3>
<section>
    <svg class="fifty" viewBox="0 0 100 100">
        <path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path>
    </svg>
</section>

<h3>100x100</h3>
<section>
    <svg class="hundred" viewBox="0 0 100 100">
        <path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path>
    </svg>
</section>

Upvotes: 6

neuro_tarun
neuro_tarun

Reputation: 1442

Changing the width of the container also fixes it rather than changing the width and height of source file.

.SvgImage img {
    width: 80%;
}

This fixes my issue of resizing SVG: you can give any % based on your requirement.

Upvotes: 12

Chris P
Chris P

Reputation: 2357

Use the following code:

<g transform="scale(0.1)">
...
</g>

Upvotes: 29

duhaime
duhaime

Reputation: 27611

I have found it best to add viewBox and preserveAspectRatio attributes to my SVGs. The viewbox should describe the full width and height of the SVG in the form 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Upvotes: 40

Tanveer
Tanveer

Reputation: 2107

you can resize it by displaying svg in image tag and size image tag i.e.

<img width="200px" src="lion.svg"></img>

Upvotes: 49

Lorenz Lo Sauer
Lorenz Lo Sauer

Reputation: 24730

Try these:

  1. Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag

  2. Then scale the picture simply by setting the height and width to the desired percent values. Good luck.

  3. Set a fixed aspect ratio with preserveAspectRatio="X200Y200 meet (e.g. 200px), but it's not necessary

e.g.

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

Upvotes: 72

Amadan
Amadan

Reputation: 198476

Open your .svg file with a text editor (it's just XML), and look for something like this at the top:

<svg ... width="50px" height="50px"...

Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.

Upvotes: 318

Related Questions