0

Anyone familar with how to shrink the width & height without effecting the size of the SVG. As has a huge space around the SVG file and I must get the element to the size of the SVG.

The problem is the viewport is bigger then then actual graphic but if I change the viewport size, the graphic shrinks. I don't want the graphic to shrink I want to, crop the viewport to the graphic but retain it's size ?

Edited by Siberian

4
Contributors
3
Replies
31
Views
1 Year
Discussion Span
Last Post by AndrisP
0

Maybe some code would make it more obvious. It sounds like CSS height and width would be all you need if you have to re-size a surrounding element to match the SVG.

0

hericles is right. Give the containing element in your CSS the same dimensions as the svg's viewBox size and sharing your code would be indeed handy.

0

SVG example ("width" and "height" similar to "viewBox"):

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" 
        version="1.1" width="150" height="150" 
        viewBox="0 0 150 150">
    <rect x="0" y="0" width="150" height="150" 
            fill="#FFFFAA" opacity="1" />
    <circle r="20" cx="75" cy="75" fill="none" 
            stroke="#000088" stroke-width="3" />
    <rect x="60" y="60" width="30" height="30" 
            fill="#888888" opacity="1" />
</svg>

if you change "width" and "height" of SVG then image zoom to new width and height:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" 
        version="1.1" width="450" height="450" 
        viewBox="0 0 150 150">
    <rect x="0" y="0" width="150" height="150" 
            fill="#FFFFAA" opacity="1" />
    <circle r="20" cx="75" cy="75" fill="none" 
            stroke="#000088" stroke-width="3" />
    <rect x="60" y="60" width="30" height="30" 
            fill="#888888" opacity="1" />
</svg>

but if you change "viewBox" then image crop:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" 
        version="1.1" width="150" height="150" 
        viewBox="50 50 50 50">
    <rect x="0" y="0" width="150" height="150" 
            fill="#FFFFAA" opacity="1" />
    <circle r="20" cx="75" cy="75" fill="none" 
            stroke="#000088" stroke-width="3" />
    <rect x="60" y="60" width="30" height="30" 
            fill="#888888" opacity="1" />
</svg>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.