How can I display an SVG image within an

Question

How can I display an SVG image within an object tag at a different scale than its original scale?

For example, if I have an SVG file saved as example.svg:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>

and I want to display this in page.html at a different scale:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <object type="image/svg+xml" data="/example.svg" width="50" height="50">
        </object>
    </body>
</html>

It ought to display a version of the svg scaled down to 50x50, but instead it keeps the scale the same and gives the image scrollbars.

However, if I do an inline SVG like the following, it works:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            width="50"
            height="50"
            viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50" fill="orange"></circle>
        </svg>
    </body>
</html>

I have tried various combinations of this, such as adding width="100" and height="100" into the .svg file, using preserveAspectRatio="xMidYMid meet", adding 'px' to the width and height values, using width and height = "100%" in the svg, and other things, but none of them have worked.

In my situation I can just include the svg inline, but I don't feel like it should be that hard to change the scale of the image. Plus I want the browser to be able to cache the image.

Why not just use a normal `` utilizing the svg file as the src? Why use an ` — enhzflep, May 16 '13 at 03:25
That's a good idea for now, but I still would like to know how to be able to use — andrezsanchez, May 20 '13 at 12:31

score 3 · Answer 1 · answered May 16 '13 at 06:23

3

SVG is case sensitive. If you change viewbox to the correct case of viewBox in example.svg then this displays as you want it to (at least it does on Firefox and Opera I didn't try other UAs).

answered May 16 '13 at 06:23

Robert Longson

118,664
26
252
242

Sorry, this was an example I typed up to demonstrate the problem I'm having, that typo isn't in my actual .svg file. I'll fix the example.I haven't tried any browser but Chrome at the moment, but it's good to know it works – andrezsanchez May 20 '13 at 12:28

score 3 · Answer 2 · answered May 20 '13 at 21:08

3

You need to set the width and height attributes of your svg element to 100%. It will then be scaled to the size of the container (the object element). Without that, it will just be displayed at the exact size specified (100 pixels).

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0 0 100 100"
    width="100%" height="100%">
    <circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>

answered May 20 '13 at 21:08

Paul LeBeau

97,474
9
154
181

I finally got around to trying this, without any luck :/ I did a bit more research and there doesn't appear to be a decent way to do this at the moment without scaling the actual coordinates within the SVG, which kind of defeats the purpose of the S in SVG. – andrezsanchez Jul 05 '13 at 15:26

score 0 · Answer 3 · edited Mar 03 '19 at 08:45

What works for me is the following: I define the "basic" size of the svg with a viewbox and also add the attributes "height=100% width=100%". This means, that the svg will take 100% of the width and height of its parent element. If I put the SVG in an <object> tag, I simply define the size of the object per css and voila, the SVG automagically adapts its size. In the example, I scale an SVG where the viewbox defines a size 100x100px to 300x300px.

file.svg

<svg viewBox="0 0 100 100" width="100%" height="100%">
 <path .... /> 
</svg>

HTML:

<object type="image/svg+xml" data="your/path/to/file.svg" class="icon"></object>

CSS:

object.icon{
    height:auto;
    width: 300px;
}

How can I display an SVG image within an

3 Answers3

Linked