Make SVG Image ignore parent viewBox

Question

I have image inside svg with viewBox, is it possible to make image ignore scaling caused by viewBox and always keep size image 50x50?

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <image xlink:href="someimage.png" width="50" height="50"></image>
</svg>

Here is fiddle: http://jsfiddle.net/3LpxV/1/

Just delete the viewBox attribute. If there's more to it than that you should explain what that is. — Robert Longson, Feb 26 '14 at 15:03
There are a lot of other elements which should be under viewBox — Ruben Nagoga, Feb 27 '14 at 17:36
Create an inner svg element with a viewBox and put the other elements under that or if the svg is embedded within html move it to another svg element. — Robert Longson, Feb 27 '14 at 18:38

score 0 · Answer 1 · answered Mar 01 '14 at 14:32

0

How about nested svg elements?

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <image xlink:href="someimage.png" width="50" height="50"></image>
    <svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
        <!--other elements-->
    </svg>
</svg>

answered Mar 01 '14 at 14:32

defghi1977

5,081
1
30
29

Structure of svg can't be changed – Ruben Nagoga Mar 03 '14 at 07:19

score 0 · Answer 2 · answered Mar 11 '14 at 06:05

You can display image by css background-image property of svg element instead of using image element.
This image is not affected by viewBox of svg element.

    svg{
        background-image:url("***.jpg");
        background-repeat:no-repeat;
        background-size:50px 50px;
    }

Make SVG Image ignore parent viewBox

2 Answers2