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
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?
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.
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)">
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/
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.
Related
When I change the width or height of the SVG it ends up looking like this instead of scaling properly. (getting cropped)
the problem only happens when the inline SVG is in React. I have tried to fix this for like 7 hours but I've got nothing to work.
The SVG tag is this:
<svg baseprofile="tiny"
fill="#ececec"
stroke="black"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width=".2"
version="1.2"
viewbox="0 0 2000 857"
xmlns="http://www.w3.org/2000/svg">
However, this is probably not relevant since I tested it without any properties and it still won't scall properly. (In pure HTML and CSS I can get this to work easily)
Adding Overflow: visible; does make it show the cropped area but it's still not scaled down.
The problem was that vanilla HTML is okay with it being "viewbox" but React requires it to be in camelCase as "viewBox"
I have got svg with flexible height and width.
I'm trying to produce code equivalent to this:
<div id="svg-container">
<svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'>
<path
style="fill:none;stroke:blue;stroke-width:5;"
d="M0% 10% L50% 10% L50% 90% L100% 90%" <-here is the problem
/>
</svg>
</div>
So when I scale #svg-container i will get:
But since I can't create path with percent coordinates the best I can do is: (JSFiddle)
<div id="svg-container">
<svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'>
<path
style="fill:none;stroke:blue;stroke-width:5;"
d="M0 10 L50 10 L50 90 L100 90"
/>
</svg>
</div>
Which gives me this results:
On the second picture you can see problem with stretched stroke-width.
My question is: how to achieve behavior like on the first picture?
I'm not looking for JavaScript answers and breaking path.
Seems like you want a style of vector-effect: non-scaling-stroke
Note that not all UAs implement this but Chrome and Firefox certainly do.
I am sorry to say I think you will only be able to do this with JavaScript, even if this is not the answer that you're looking for. What is happening is that you are first generating the SVG path, then resizing it afterward so the image becomes stretched.
To use JavaScript you can use (browser.width/100)*10 to get 10%, for example, and this should work for all sizes of browser screen.
How are you re-scaling the image (i.e. is it a CSS #media query)? It might be possible to draw the path after the re-scale, but again I feel this will need JS as you will need to load the content after the browser load.
Sorry to answer in opposition to what you have asked, but unless there is an alternative I think this is the only way you can do this.
I'm trying to embed several .svg-files on my website.
Everything seems to work perfectly fine as long as I use Chrome, Firefox or any Mobile browser I've tested so far. However, there's one exception: Whenever I view a svg on my Windows Phone (Internet Explorer Mobile) the image gets distorted.
I guess I found the reason for this behavior already: Since I want the size of any svg to be fluid, I gave them a percentage-based width and an auto-height. This works, as mentioned before, fine for most browser. Internet-Explorer however, seems to ignore height:auto thereby stretching the svg to it's maximum heigth.
That said, one solution would be to assign fixed dimensions for every single .svg.
But that would sacrifice the idea of a responsive design.
Has anybody an idea what the problem might be?
Oh, an here's the link to a page of my website featuring a svg (the black "star" saying "select"):
http://alexanderschlosser.de/select.html
Many thanks in advance!
Alex
EDIT: That's the code of one of the embedded SVGs.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve">
<path fill="#E64132" d="M45,87.25C21.703,87.25,2.75,68.297,2.75,45S21.703,2.75,45,2.75S87.25,21.703,87.25,45
S68.297,87.25,45,87.25"/>
<path fill="#FFFFFF" d="M45,5.5c21.78,0,39.5,17.72,39.5,39.5c0,21.78-17.72,39.5-39.5,39.5C23.22,84.5,5.5,66.78,5.5,45
C5.5,23.22,23.22,5.5,45,5.5 M45,0C20.147,0,0,20.147,0,45c0,24.853,20.147,45,45,45c24.853,0,45-20.147,45-45
C90,20.147,69.853,0,45,0"/>
<path fill="none" stroke="#FFFFFF" stroke-width="5.5" stroke-miterlimit="10" d="M67.08,45c0,0-7.193-13.292-22.08-13.292
S22.92,45,22.92,45S30.113,58.292,45,58.292S67.08,45,67.08,45z"/>
<path fill="#FFFFFF" d="M50.433,45c0-3-2.433-5.433-5.433-5.433c-3,0-5.432,2.433-5.432,5.433S42,50.433,45,50.433
C48,50.433,50.433,48,50.433,45"/>
</svg>
If you want to have some responsive SVG's add this new attribute to the svg tag:
preserveAspectRatio="xMinYMin meet" <----- take notice of the capitalization
you dont need the width and height attributes anymore, they should now responsively conform to the size of the container they are in (though you might need to define the size of the container because sometimes chrome will render extra white space below an svg if not defined).
edit: defining the width and height of the svg in css works too
Here's a fiddle
Trying to make compatible all svg's images in different browsers I have an issue with Firefox.
I am using a .SVG image in an element img. Something like that:
<img src="image.svg" />
If you can see the image below,seems that the SVG is repeated. If I will used the svg as background-image, problably I will can do background-repeat: no-repeat, but in this case I need use the svg at img element and can't specify background-repeat to an element img.
How I can fix this? All answers will be apreciate.
I'm going to explane this strange case..
This is the code of my SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="21.391px" height="18.881px" viewBox="228.645 224.748 21.391 18.881" enable-background="new 228.645 224.748 21.391 18.881" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<g>
<path fill="#CEE4C4" d="M243.708,230.977c-3.494,0-6.328,2.83-6.328,6.323c0,3.494,2.834,6.328,6.328,6.328 c3.496,0,6.328-2.834,6.328-6.326C250.036,233.808,247.204,230.977,243.708,230.977z M244.437,242.177h-1.508v-1.805h1.508V242.177 z M244.308,239.066h-1.24l-0.129-5.723h1.498L244.308,239.066z"/>
<g>
<path fill="#9FAEB1" d="M237.384,237.376c0-0.024-0.004-0.051-0.004-0.076c0-0.627,0.096-1.229,0.266-1.803l-3,2.25v-3h-4v-8h12 v4.324c0.347-0.059,0.699-0.096,1.062-0.096c0.318,0,0.63,0.031,0.938,0.076v-6.305h-16v12h4v4L237.384,237.376z"/>
</g>
</g>
</svg>
The element SVG measures are 21x19 px.
BUT! the measure of the element SVG inside are 22x20 px.
So, if i put the measures of svg (21x19) that don't fix the initial problem, however if i put width and height of the element (22x20) solves the problem.
Ok i see what's your problem now. You should try to add for img tag the exact width and hight of the image you try to add, just to ensure it will display the expected dimension. Try it and see what happens, if not please make a jsfiddle to can help you
I have some SVG files that specifies width and height as well as viewbox like this:
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
but how to display them in the browser at a size I decide? I want them smaller and have tried:
<object width="400" data="image.svg"></object>
but then I get visible scrollbars.
It works if I change the SVG files to set width and height to 100% instead, but I want to decide the size in the HTML regardless of what sizes are used in the SVG file. Is this possible ?
You can add "preserveAspectRatio" and "viewBox" attributes to the <svg> tag to accomplish this.
Open the .svg file in an editor and find the <svg> tag.
in that tag, add the following attributes:
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
Replace {width} and {height} with some defaults for the viewBox. I used the values from the "width" and "height" attributes of the SVG tag and it seemed to work.
Save the SVG and it should now scale as expected.
I found this information here:
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
None of the answers given here worked for me when I asked this back in 2009. As I now had the same issue again I noticed that using the <img> tag and width together with an svg works fine.
<img width="400" src="image.svg" />
<body>
<div>
<object type="image/svg+xml" data="img/logo.svg">
<img src="img/logo.svg" alt="Browser fail" />
</object>
</div>
img/logo.svg
...
<svg
width="100%"
height="100%"
viewBox="0 0 640 80"
xmlns="http://www.w3.org/2000/svg"
version="1.1" />
This setup worked for me.
You can reach into the embedded svg using JavaScript:
var svg = document.getElementsByTagName('object')[0].\
contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');
Since your svg already has a viewBox, Firefox should scale the 576 pixel width in the viewBox to the 400 pixel width in your document. Other svgs might benefit from a new viewBox derived from the advertised width and height (these are often the same numbers). Other browsers might benefit from different svg tweaks.
I encountered a problem where iOS on an iPad would not correctly resize SVG images in a <object> tag.
The CSS style would increase or decrease size of the <object> container, but the image inside of it would not be modified (on iPad, iOS 7).
The SVG images were exported from Adobe Illustrator, and the solution turned out to be replacing the width and height in this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843"
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">
with:
width="100%" height="100%"
I needed to use the <object> tag because the <img> tag does not currently support embedding bitmapped images in SVG's.
Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag
Then scale the picture simply by setting the height and width to the desired percent values. Good luck.
You can set a fixed aspect ratio with preserveAspectRatio="x200Y200 meet, but it's not necessary
e.g.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10%"
height="10%"
preserveAspectRatio="x200Y200 meet"
viewBox="0 0 350 350"
id="svg2"
version="1.1"
inkscape:version="0.48.0 r9654"
sodipodi:docname="namesvg.svg">
Just use CSS to make the browser resize the SVG!
Like so:
<object style="width:30%">
See http://www.vlado-do.de/svg_test/ for more details. I just also tried it locally with an SVG that has its width and height given in "pt". It works well in Firefox.
Let see. I had to refresh my memory on SVG, I haven't used it much these years.
From what I found today, it seems that if you specify dimension of objects without units, they have a fixed size (in pixels, I think). Apparently, then, there is no way to resize them when you resize the SVG (it only change the viewport/canvas size).
Unless, as pointed out, you specify the size of the SVG in percentage OR specify a viewBox (eg. viewBox="0 0 600 500").
Now, if you have no way to change the exported SVG, you are out of luck, I fear. What library do you use?
Here is a PHP solution using QueryPath based on Jim Keller's answer.
Once QueryPath is loaded just pass your svg script to the function.
function scaleableSVG($svg){
$qp = qp($svg, 'svg');
$width = $qp->attr('width');
$height = $qp->attr('height');
$qp->removeAttr('width')->removeAttr('height');
$qp->attr('preserveAspectRatio', "xMinYMin meet");
$qp->attr('viewBox', "0 0 $width $height");
return $qp->html();
}