Member Avatar for Siberian

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
  • 275 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by AndrisP
Member Avatar for hericles

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.

Member Avatar for gentlemedia

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.

Member Avatar for AndrisP

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.