CODEWITHSUNDEEP
htmlcssimagesvg
jezzipin
jezzipin

Reputation: 4254

Resize svg image and areas

This is my first time using SVG so apologies if this is a stupid question but I am trying to create a clickable continent map on my site and have acquired an SVG image with the continents mapped out correctly from wikipedia.

http://commons.wikimedia.org/wiki/File:Continents.svg

Map

However, this image is 585 x 299 pixels and I require an image that is 292 x 137 pixels. I've read online that these images are scalable and that all you need to do is modify the width and height value in the svg definition so I have done so here:

<svg width="292" height="137" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">

However, this only scales the canvas as such and does not scale the internal areas. How do I get the areas to scale to the modified dimensions of the image?

Rendered map

Upvotes: 1

Views: 1920

Answers (4)

Robert Longson
Robert Longson

Reputation: 124229

Add a viewBox attribute (viewBox="0 0 585 299" is probably what you want) to the svg element. We can simulate what that would look like by using a fragment identifier which will impose a viewBox on the original file e.g.

http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg#svgView(viewBox(0,0,529,290))

That sure displays differently in Firefox.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115296

The SVG will be any size you tell it to in the CSS

JSfiddle Demo

CSS

svg {
    width:292px;
    height:137px;
    border:1px solid grey      
}

This works with or without the dimensions stated in the SVG. the important item is the 'viewbox' which sets the co-ordinate structure for the SVG.

Upvotes: 1

Thibaud Granier
Thibaud Granier

Reputation: 390

Use a viewBox like this :

 <svg 
 xmlns="http://www.w3.org/2000/svg" 
 version="1.0"
 width="292pt" height="137pt"
 viewBox="0 0 468 239"
 preserveAspectRatio="xMidYMid meet"
 >
 <g 
 transform="translate(0,239) scale(0.016963,-0.016963)"
 fill="#000000"
 stroke="none"
 >

http://jsfiddle.net/Vac2Q/4147/

Upvotes: 0

jezzipin
jezzipin

Reputation: 4254

The only way I have found so far is to wrap all of my areas in a tag and they apply a scale of 

<g transform="scale(0.68)">

Upvotes: 0

Related Questions