Embedded svg isn't scaled correctly - html

I'm trying to embed an svg inside an svg (the real application is to be able to embed an image in a d3 chart). Here's a simplified version:
<svg viewBox="0 0 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="0" cy="0" r="80" style="fill:blue" />
<image x="10" y="20" width="120" height="150" xlink:href="https://webkit.org/blog-files/circle.svg" />
</svg>
The embedded image scales correctly if it's a raster image (png/jpg), but not an svg. Here's a fiddle of it not working - the big red rectangle should actually be this circle.
https://jsfiddle.net/rg4kyuc7/1/
How do I get the svg to scale to the specified width and height?
Edit - working on Chrome but not Firefox?! Any ideas why?


The behaviour of <image> changed a little between SVG 1.1 and the upcoming SVG 2.
It looks like Chrome is following the SVG 2 behaviour. Chrome seems to be further along in implementing SVG 2 than other browsers. The way it is displaying the embedded image would be wrong if it were still supporting only the SVG 1.1 standard.
Firefox (and IE, which is behaving the same) are both incorrect with respect to both SVG 1.1 and SVG 2. The SVG 1.1 standard says that when the SVG file referenced by <image> has no viewBox, it should just be displayed at the position defined by the x and y attributes, and the width and the height of the <image> element is ignored. In other words like this:
<svg viewBox="0 0 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="0" cy="0" r="80" style="fill:blue" />
<image x="10" y="20" width="335" height="296" xlink:href="https://webkit.org/blog-files/circle.svg" />
</svg>
In any case, there is a simple fix. Add an appropriate viewBox to circle.svg and it will render the same in all browsers, whether they support SVG 2 or not.
<svg xmlns="http://www.w3.org/2000/svg" width="335" height="296" viewBox="0 0 335 296">


I've came across a similar issue where we ended up using the SVG's tag.
This way you will be able to embed an html img tag in it and style it as such. Something like this:
<svg viewBox="0 0 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="0" cy="0" r="80" style="fill:blue" />
<foreignObject x="10" y="20" width="120" height="150"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<img src="https://webkit.org/blog-files/circle.svg" alt="Smiley face" height="150" width="120">
</body>
</foreignObject>
</svg>
Here is the MDN documentation for
https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

Related

How can I bundle many SVG images inside just one?

It's not bad if I load an HTML page
img, svg {
background-color: #eee;
margin: 20px;
}
<div>
<img src="circle.svg"/>
<img src="square.svg"/>
</div>
with just a pair of SVG images
circle.svg
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 300" width="400" height="300">
<circle cx="200" cy="150" r="100"
stroke="red" fill="blue" stroke-width="10" />
</svg>
square.svg
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 300" width="400" height="300">
<rect x="100" y="50" width="200" height="200"
stroke="green" fill="gray" stroke-width="10" />
</svg>
but with over a hundred SVG images, the server gets excessively hit by requests.
One solution is to serve the static files from a dedicated server, but this only dodges the problem. The number of requests remains high.
How can I bundle many SVG images inside just one?

You could use a SVG sprite generator to create one big file with all images aligned in it.
SVG sprite generator will also generate a CSS file in which each individual SVG will be represented with a specific class.
In you HTML you just have to call each image by its class name.
A basic sprite.css could be :
.svg {
background-image: url(sprite.svg) no-repeat;
}
.circle {
background-position: top left;
height:300px;
width: 400px;
}
.square{
background-position: top right;
height:200px;
width: 200px;
}
And then in your html file you could just call:
<div>
<div class="circle"></div>
<div class="square"></div>
</div>

It sounds like you need an SVG sprite. I use this trick all the time. It's great. Just make your svg blocks symbol elements and nest them inside an svg like this:
<svg id="svg-sprite" xmlns="http://www.w3.org/2000/svg">
<symbol id="svg-circle" viewBox="0 0 400 300" width="400" height="300">
<circle cx="200" cy="150" r="100" stroke="red" fill="blue" stroke-width="10" />
</symbol>
<symbol id="svg-square" viewBox="0 0 400 300" width="400" height="300">
<rect x="100" y="50" width="200" height="200" stroke="green" fill="gray" stroke-width="10" />
</symbol>
</svg>
Note that you don't want the xlmns attribute on the individual symbol elements, just the root svg. And the root svg doesn't need a viewBox attribute, since that is encoded in the child symbol elements.
Then you call the symbols elsewhere in the HTML like this via the <use> tag:
<svg>
<use xlink:href="#svg-circle"></use>
</svg>
Lastly, you need to hide the sprite in CSS:
#svg-sprite {
display: none;
}
Here's a Fiddle to demonstrate. Good luck!

The following is a combination of gael's and maqam7's answers, with a bug fix and some details.
First, we combine the two SVGs into one. (We write our own script, use an editor's macros, use one of the web sites that do it, or do it by hand.)
sprite.svg
<svg id="mysprite" xmlns="http://www.w3.org/2000/svg">
<symbol id="circle"
viewBox="0 0 400 300"
width="400" height="300">
<circle cx="200" cy="150" r="100"
stroke="red" fill="blue" stroke-width="10" />
</symbol>
<symbol id="square"
viewBox="0 0 400 300"
width="400" height="300">
<rect x="100" y="50" width="200" height="200"
stroke="green" fill="gray" stroke-width="10" />
</symbol>
</svg>
When we want a circle or a square, we use the xlink:href attribute (deprecated but continue to use it), which will invoke a sub-sprite.
<div class="container">
<svg>
<use xlink:href="sprite.svg#circle"></use>
</svg>
<svg>
<use xlink:href="sprite.svg#square"></use>
</svg>
</div>
There is no need to include the sprite in the body
<img src="sprite.svg"/>
as the sprite is referenced within each svg element.
Hence there is no need to hide the global sprite.
#svg-sprite {
display: none;
}
Only the sub-parts appear.
One caveat: Chrome loads an img and svg directly, but will refuse to load use/xlink:href unless you run a local server.
Remaining issue(s)
I'm not sure this is optimal. It may be that two requests continue to be sent. It's just that the cache will catch the second as identical. No harm is done. Still, loading once via a hidden svg may be a better approach, if someone can fill in the details.

Request part of SVG in <img> (or <object>)

Could I load only part of a SVG (that could be identified by an #id tag) in an <img> or <object> tag ?
Reason (if I need one) is I don't want to have two SVG files if I'm only using part of a already in use one.
If I can't by using these tags, could I by using CSS or other means ?

Please take a look at this svg file in view-source. Inside the root svg there are 2 other svg elements. Those 2 svg elements have an id each and the style is saying that the nestedsvg elements are visible only if :target.
svg > svg:not(:target) {
display: none;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 0 225 225">
<style type="text/css">
<![CDATA[
svg > svg:not(:target) {
display: none;
}
]]>
</style>
<desc>
<g id="cat">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,..."/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,..."/>
</g>
</desc>
<svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="black" />
</svg>
<svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="red" />
</svg>
</svg>
Here is how to use one of those svg elements as an image or as an object:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" width="200" />
<object width="200" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"></object>

What you want to achieve is easiest done with another inline SVG instead of a <img> or <object> tag:
<svg style="width:200px;height:200px" viewBox="35 50 150 150">
<use xlink:href="myFile.svg#head" />
</svg>
Two things you need to get right are
the viewBox: to get just the part of your SVG that you want, you have to identify where the path is and what bounding box it has. The <use> element takes care that only the element you select is visible, but it does not identify where inside that image the element is.
the overall size your selected element is shown at. SVG has no notion of a "natural size, you always have to give a width and height. The viewBox will then be fitted inside that area.

How do you get HTML to adjust to SVG scaling

When I scale an SVG using the scale transform, the surrounding html does not respect this scale and fails to adjust its size.
I have the following SVG:
<div>
<svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
<circle r="150px" cx="150px" cy="150px" fill="orange"/>
</svg>
</div>
<div>
<svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
<circle r="150px" cx="150px" cy="150px" fill="green"/>
</svg>
</div>
For some reason the surrounding html doesn't adjust for the scaled up Svg.
All my testing so far has been on chrome and using primarily Svg declared in millimeter units.
When tested, the above example with the scale transform, the two circles overlap.
Without the transform they do not.
I want them NOT to overlap when scaled.
How can I get the Html to correctly adjust with the scaling of Svg?
Thanks in advance.

You have set fixed height and width and fixed pixels for your svg.
You have to change the properties of your svg and the actual circle path to correct it like in my example.
the transform property is something you don't need here in my opinion!
Try to change that and your HTML will surround like you want.
<div>
<svg height="100" width="100" viewbox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
<circle r="100px" cx="100px" cy="100px" fill="orange"/>
</svg>
</div>
<div>
<svg height="100" width="100" viewbox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
<circle r="100px" cx="100px" cy="100px" fill="green"/>
</svg>
</div>
That should do the job!

I think the problem is that, in SVG 1.1, I believe it wasn't properly defined how a transform attribute behaved when placed on a root <svg> element.
In SVG2 it has been. The behavior is defined in the CSS Transforms specification.
Chrome seems to have implemented that, but Firefox hasn't yet done so for SVGs. The behaviour in Chrome seems correct. transform on <svg> elements behaves the same as an HTML element (see example below).
<div>
<svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
<circle r="150px" cx="150px" cy="150px" fill="orange"/>
</svg>
</div>
<div>
<div style="width:300px; height:300px; background-color:green; border-radius:50%; transform:scale(1.55)">
</div>
</div>

SVG Circle with pattern image only renders on chrome, why not firefox and edge?

I am trying to render an image inside a circle with svg. This works on chrome, but not other browsers, what am I doing wrong?
I have included several possible ways of specifying the link to the image, href= is what works with chrome. I can't get any of these to work elsewhere. If I change the fill to #000 it fills with black - so the problem is in the pattern.
<svg width="488.20001220703125" height="469.183349609375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="circleimage" x="135.99766906738282" y="126.2336688232422" patternUnits="userSpaceOnUse" height="206.440673828125"
width="206.440673828125">
<image x="0" y="0" href="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xmlns:xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"></image>
</pattern>
</defs>
<circle cx="239.21800598144532" cy="229.4540057373047" r="103.2203369140625" fill="url(#circleimage)"></circle>
</svg>

You need to specify the height and width of your image.

How to make SVG the same size as its internal <switch> element?

I have an svg of an eye, and am using it as an icon.
This svg has a <switch> element inside that contains all the path drawing stuff. When you inspect this <switch> element in the javascript console it shows its dimensions as 700px X 500px. The SVG containing it, however is 707px X 707px.
I.e. The SVG has a load of blank space at the top.
I would like to know how to make the SVG the same size as the element contained in it. I need to do this because I want to add a bootstrap tooltip to the image, but the tooltip gets placed much too high above the image because it is padded with all this white space!
I'm new to this SVG stuff - I tried changing the size of the viewport on the SVG, but that just cut the bottom off the image, and left the blank space at the top.
Here is the code for the SVG image:
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<switch>
<foreignobject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"></foreignobject>
<g i:extraneous="self">
<g>
<path d="M98.066,57.193c-0.177-0.209-3.629-4.26-9.421-9.081l9.468-11.834l-4.226-3.381l-9.502,11.878 c-0.088-0.065-0.172-0.13-0.261-0.195c-4.013-2.935-8.08-5.37-12.147-7.306l7.502-15.005l-4.841-2.42L66.99,35.146 c-3.896-1.456-7.768-2.423-11.569-2.904l-4.959-17.064l-5.196,1.51l4.418,15.202c-5.41,0.042-11.018,1.142-16.674,3.256 l-7.648-15.297l-4.841,2.42l7.502,15.005c-4.067,1.936-8.134,4.371-12.147,7.306c-0.089,0.065-0.172,0.13-0.261,0.195 L6.113,32.897l-4.226,3.381l9.468,11.834c-5.792,4.82-9.244,8.872-9.421,9.081L0.456,58.94l1.478,1.747 c0.219,0.259,5.455,6.406,13.942,12.613C27.234,81.608,39.034,86,50,86s22.766-4.392,34.124-12.699 c8.487-6.207,13.723-12.354,13.942-12.613l1.478-1.747L98.066,57.193z M71.647,58.94c0,11.514-9.036,20.954-20.388,21.608 c-0.419,0.014-0.837,0.039-1.259,0.039s-0.84-0.025-1.259-0.039C37.389,79.894,28.353,70.454,28.353,58.94 c0-11.936,9.711-21.646,21.647-21.646c0.422,0,0.84,0.025,1.259,0.04C62.611,37.988,71.647,47.427,71.647,58.94z M7.666,58.941 c3.102-3.247,10.491-10.35,20.2-15.537c-3.098,4.401-4.925,9.757-4.925,15.536c0,5.773,1.823,11.126,4.916,15.524 c-3.277-1.745-6.214-3.656-8.681-5.455C13.808,65.097,9.762,61.139,7.666,58.941z M80.824,69.01 c-2.467,1.798-5.404,3.71-8.681,5.455c3.093-4.398,4.916-9.751,4.916-15.524c0-5.773-1.823-11.125-4.916-15.523 c3.277,1.745,6.214,3.656,8.681,5.454c5.37,3.914,9.415,7.872,11.511,10.069C90.24,61.138,86.193,65.096,80.824,69.01z"></path>
<path d="M39.179,58.94c0,5.98,4.845,10.825,10.818,10.825c5.98,0,10.825-4.845,10.825-10.825c0-5.98-4.845-10.825-10.825-10.825 C44.024,48.114,39.179,52.96,39.179,58.94z M45.941,61.646c-2.239,0-4.056-1.817-4.056-4.055c0-2.246,1.817-4.063,4.056-4.063 c2.239,0,4.056,1.817,4.056,4.063C49.997,59.829,48.18,61.646,45.941,61.646z"></path>
</g>
</g>
</switch>
</svg>
I've included it here in a PLNKR so you can see what is happening:
http://plnkr.co/edit/gw1k0vQGon3dxUOVvuDB
Here is the current look of the picture, with new colours for clarity:
Here is how I would like the image to look (again - ignore the poxy colours...):
I want to strip all the blank space from the top and the bottom.
Any ideas?

Like so? I've added a rect background so it's easy to see the extent of the SVG. All I've done is modify the viewBox so that values match the shape extents.
<svg viewBox="0 14 100 73" width="100" height="71" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" enable-background="new 0 0 100 100" xml:space="preserve" overflow="hidden">
<rect width="100" height="100" fill="lightblue"/>
<switch>
<foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"></foreignobject>
<g i:extraneous="self">
<g>
<path d="M98.066,57.193c-0.177-0.209-3.629-4.26-9.421-9.081l9.468-11.834l-4.226-3.381l-9.502,11.878 c-0.088-0.065-0.172-0.13-0.261-0.195c-4.013-2.935-8.08-5.37-12.147-7.306l7.502-15.005l-4.841-2.42L66.99,35.146 c-3.896-1.456-7.768-2.423-11.569-2.904l-4.959-17.064l-5.196,1.51l4.418,15.202c-5.41,0.042-11.018,1.142-16.674,3.256 l-7.648-15.297l-4.841,2.42l7.502,15.005c-4.067,1.936-8.134,4.371-12.147,7.306c-0.089,0.065-0.172,0.13-0.261,0.195 L6.113,32.897l-4.226,3.381l9.468,11.834c-5.792,4.82-9.244,8.872-9.421,9.081L0.456,58.94l1.478,1.747 c0.219,0.259,5.455,6.406,13.942,12.613C27.234,81.608,39.034,86,50,86s22.766-4.392,34.124-12.699 c8.487-6.207,13.723-12.354,13.942-12.613l1.478-1.747L98.066,57.193z M71.647,58.94c0,11.514-9.036,20.954-20.388,21.608 c-0.419,0.014-0.837,0.039-1.259,0.039s-0.84-0.025-1.259-0.039C37.389,79.894,28.353,70.454,28.353,58.94 c0-11.936,9.711-21.646,21.647-21.646c0.422,0,0.84,0.025,1.259,0.04C62.611,37.988,71.647,47.427,71.647,58.94z M7.666,58.941 c3.102-3.247,10.491-10.35,20.2-15.537c-3.098,4.401-4.925,9.757-4.925,15.536c0,5.773,1.823,11.126,4.916,15.524 c-3.277-1.745-6.214-3.656-8.681-5.455C13.808,65.097,9.762,61.139,7.666,58.941z M80.824,69.01 c-2.467,1.798-5.404,3.71-8.681,5.455c3.093-4.398,4.916-9.751,4.916-15.524c0-5.773-1.823-11.125-4.916-15.523 c3.277,1.745,6.214,3.656,8.681,5.454c5.37,3.914,9.415,7.872,11.511,10.069C90.24,61.138,86.193,65.096,80.824,69.01z"></path>
<path d="M39.179,58.94c0,5.98,4.845,10.825,10.818,10.825c5.98,0,10.825-4.845,10.825-10.825c0-5.98-4.845-10.825-10.825-10.825 C44.024,48.114,39.179,52.96,39.179,58.94z M45.941,61.646c-2.239,0-4.056-1.817-4.056-4.055c0-2.246,1.817-4.063,4.056-4.063 c2.239,0,4.056,1.817,4.056,4.063C49.997,59.829,48.18,61.646,45.941,61.646z"></path>
</g>
</g>
</switch>
</svg>