Fill SVG path with a background-image without knowing height&width - html

I'm able to create an SVG Image which contains a filled SVG path, as already mentioned in this question: Fill SVG path element with a background-image
The SVG looks like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1">
<g transform="translate(0, 0) rotate(0)" opacity="1">
<defs>
<pattern id="img_patrickComp_patrick_cv1_Graphic3" height="313" width="468" patternTransform="translate(0, 0) scale(1, 1) rotate(0)" patternUnits="userSpaceOnUse">
<image x="0" y="0" opacity="1" height="313" width="468" xlink:href="http://www.bittbox.com/wp-content/uploads/2008/04/free_hires_wood_texture_5.jpg" />
</pattern>
</defs>
<path fill="url(#img_patrickComp_patrick_cv1_Graphic3)" stroke="Blue" d="M 86,100L 298,394L 289,710L 100,610L 100,400L 46,400 z" />
</g>
</svg>
(Link to the SVG: http://jsfiddle.net/2UFtV/)
Is it possible to create the same textured SVG without knowing the width and height of the image?


If you want to preserve the raster image at it's native dimensions you need to know the dimensions yes.

Related

Resizing SVG in HTML

I found this question Resizing SVG in HTML but the answer (removing the <svg> width and height attributes and resizing the viewBox attribute) doesn't correctly rescale my SVG file.
It's a logo file that I purchased from Looka and I'd like to begin using it but I'm stumped as to how to rescale|resize it.
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>
If I remove the <svg> width and height, the viewBox retains the size.
If I also then reduce the viewBox, the image retains the same size, I assume (!?) because the child <rect> contains width and height attributes too.
But, if I remove the <rect> width and height attributes, the result is similarly-sized whitespace (and no logo).
How should I approach arbitrarily rescaling|resizing the image?
Should I preserve the width:height ratio when I adjust the viewBox?
Should the viewBox have a positive y-position (currently -25.714...)?

How about this as a useful snippet. Without editing the <svg> code at all I've set it up so that you can wrap any <svg> in a div with class of svgSize like this:
<div class="svgSize"><svg>...</svg></div>
Then using an inline style you can pass either --svgHeight or --svgWidth using whatever value you wish, so for example --svgHeight: 100px and the SVG will resize to the value given while keeping it's aspect ratio. If you don't pass either value it will default to auto which will resize to fill the parent
Gotta love CSS Custom Properties
.svgSize {
display: inline-flex;
height: var(--svgHeight, auto);
width: var(--svgWidth, auto);
}
.svgSize svg {
height: auto; width: auto;
max-height: 100%; max-width: 100%;
}
<div class="svgSize" style="--svgWidth: 5rem">
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>
</div>
<div class="svgSize" style="--svgHeight: 15rem">
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>
</div>
<div class="svgSize" style="">
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="3171.4285714285716"
height="2645.5238095238096"
viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
<rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
<g transform="scale(8.571428571428571) translate(10, 10)">
<defs id="SvgjsDefs2369" />
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
<g transform="matrix(...)"></g>
</g>
</svg>
</div>

Using embedded SVG inside a clip-path of an SVG

Trying to create a mask for an image using SVG. The mask is created out of a rounded corners rect, and a tip at the upper right corner.
I'm creating the entire thing just in SVG, but the I can't properly clip the tip of the mask. It seems as if you can't use an embedded SVG inside the clip-path element? Is that true? Whats the proper way to implement this than?
The image gets clipped only by the rectangle.
Here is my code -
<svg width="100%" height="210">
<defs>
<clipPath id="mask">
<rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
<svg viewBox="0 0 33.5 18" width="44px" y="-93" x="calc(100% - 62px)">
<path fill="black" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
</svg>
</clipPath>
</defs>
<image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
x="0"
y="0"
width="100%"
preserveAspectRatio="none"
clip-path="url(#mask)"/>
</svg>
And a link to the codepen - http://codepen.io/itayd/pen/VpXLZW

The solution was to define the path element in the defs, and use a element inside the clipPath.
<svg width="100%" height="210">
<defs>
<path transform="translate(50%, 50%)" cx="100" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
<path id="tip" fill="green" d="M37.5,24.4C37.5,11,48.5,0,62,0H0v34h37.5V24.4z"/>
<clipPath id="mask">
<rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
<use xlink:href="#tip" x="calc(100% - 68px)"/>
</clipPath>
</defs>
<image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
x="0"
y="0"
width="100%"
preserveAspectRatio="none"
clip-path="url(#mask)"/>
</svg>

Embedded svg isn't scaled correctly

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

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>

Make css background image (svg) responsive

I want to use a SVG file as background image (css).
Here is my SVG:
<?xml version="1.0"?>
<svg width="428" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="102" width="430" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="400" width="580"/>
</g>
</g>
<g>
<title>Layer 1</title>
<text stroke="#000" transform="matrix(1.22606 0 0 1.22606 -24.7533 -46.6879)" opacity="0.3" font-style="italic" xml:space="preserve" text-anchor="left" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="87.150366" x="22.228393" stroke-width="0" fill="#000000">Hello world!</text>
</g>
</svg>
I encoded it with http://b64.io and used it like this:
#new-hello-world {
background-image: url(…);
background-repeat: no-repeat;
}
Now my problem is that the SVG is not responsive. How can I solve this?
Any help would be greatly appreciated.
EDIT:
I already tried to make the svg width and height 100% but that did not work.

Give the <svg> element a viewBox attribute e.g. viewBox = "0 0 428 100" although chipChocolate.py's suggestion of viewBox="0 0 580 400" might work better depending on exactly what you want to see.