I have an SVG:
<svg xmlns="https://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="stripes" patternUnits="userSpaceOnUse" width="7" height="6" patternTransform="rotate(45)">
<line x1="1" y="0" x2="1" y2="7" stroke="#fffa72" stroke-width="1.5" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="#fffeea" />
<rect width="100%" height="100%" fill="url(#stripes)" />
</svg>
It tested it with an external tool and it works nicely:
Now I'd like to use it in background-image. I encoded the SVG with https://www.url-encode-decode.com/
I then take the encoded SVG and put it into my SCSS:
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg+xmlns%3D%22https%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%22100%25%22+height%3D%22100%25%22%3E%0D%0A++%3Cdefs%3E%0D%0A++++%3Cpattern+id%3D%22stripes%22+patternUnits%3D%22userSpaceOnUse%22+width%3D%227%22+height%3D%226%22+patternTransform%3D%22rotate%2845%29%22%3E%0D%0A++++++%3Cline+x1%3D%221%22+y%3D%220%22+x2%3D%221%22+y2%3D%227%22+stroke%3D%22%23fffa72%22+stroke-width%3D%221.5%22+%2F%3E%0D%0A++++%3C%2Fpattern%3E%0D%0A++%3C%2Fdefs%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22%23fffeea%22+%2F%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22url%28%23stripes%29%22+%2F%3E%0D%0A%3C%2Fsvg%3E');
this doesn't work. the background remain empty. I know my HTML works fine because when I plug a different background image with a SVG I found online, it works nicely:
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22a%22%20patternUnits%3D%22userSpaceOnUse%22%20width%3D%225%22%20height%3D%225%22%20patternTransform%3D%22rotate(45)%22%3E%3Cpath%20stroke%3D%22%23fffa72%22%20d%3D%22M1%200v5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E');
What am I doing wrong?
Your xmlns value is incorrect. It's http://www.w3.org/2000/svg, not https://.
body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='stripes' patternUnits='userSpaceOnUse' width='7' height='6' patternTransform='rotate(45)'%3E%3Cline x1='1' y='0' x2='1' y2='7' stroke='%23fffa72' stroke-width='1.5' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23fffeea' /%3E%3Crect width='100%25' height='100%25' fill='url(%23stripes)' /%3E%3C/svg%3E");
}
html, body {height: auto;}
<div></div>
Documentation: https://www.w3.org/2000/svg - yep, with https:// :D
In embedded <svg> elements most browsers default the attribute to http://www.w3.org/2000/svg when it doesn't resolve (you can basically delete it and it still works). But they don't do it for background-image base64 encoded SVGs.
In short, it won't work as image if it's invalid.
Maybe this is not the answer to your exact question,
but you might make your background using a linear-gradient with a way simpler code:
body {
background: linear-gradient(135deg, #fff 2px, #fffa72, #fff 5px, #fff 9px, #fffa72, #fff 12px) 0 0 / 10px 10px;
}
Save your svg to a file.svg and try using https://www.developertoolkits.com/base64/encoder
It takes images and turns them into data urls that you can then drop inline or in css like you are trying to do.
The website you are using is a url encoder.
Related
Are there security reasons that prevent <use> elements from working in data URI images? I tried something like this:
const svg = document.querySelector("svg");
const img = document.querySelector("img");
img.src = "data:image/svg+xml;charset=UTF-8," + encodeURI(svg.outerHTML);
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="foo" width="100" height="100"/>
<use xlink:href="#foo" x="10" y="10"/>
</svg>
<img src=""/>
Both Chrome and Firefox give error messages like this if I access the data URI directly:
Example of broken image with <use> element in data URI:
<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22110%22%20height=%22110%22%3E%0A%20%20%3Crect%20id=%22foo%22%20width=%22100%22%20height=%22100%22/%3E%0A%20%20%3Cuse%20xlink:href=%22#foo%22%20x=%2210%22%20y=%2210%22/%3E%0A%3C/svg%3E%0A"/>
In modern browsers you don't have to escape < and > in SVG data URI any longer.
Neither is the outdated xlink notation required.
But # must be escaped with %23
And for string handling it is easier to use single quotes
That makes the correct string:
data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 96 96'>
<rect id='USED' width='50%' height='50%' stroke='red'/>
<use href='%23USED' x='24' y='24'/>
</svg>
<style>
rect{
fill:blue !important; /* would work for INline SVG, not for data URI SVG */
}
img {
width:200px;
filter: drop-shadow(5px 5px 5px gold);
}
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><rect id='USED' width='50%' height='50%' stroke='red'/><use href='%23USED' x='24' y='24'/></svg>">
Notes:
IMG src places the SVG in a (internal) shadowRoot, so you can't apply CSS anymore
The image remains an SVG, handled by the SVG parser, so all SVG applies... yes, you can add SMIL animations
It is a good way to get rid of (bloated) IconFonts
https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/
and since you tagged your question WebComponent, see: https://IconMeister.github.io
I've created an svg for use as a clip-path on an image, and it appears perfect in Firefox, however it doesn't work in Chrome, and I'm wondering what the problem is.
Chrome should support an inline svg clip-path according to this.
And full support according to MDN.
<style>
img {
width: 40%;
height: auto;
display: inline;
}
.clip {
-webkit-clip-path: url('#clip');
clip-path: url('#clip');
}
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">
<img src="https://i.imgur.com/nnHdzO6l.jpg" >
<svg version="1.1"
baseProfile="full"
height="400" width="400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip"
clipPathUnits="objectBoundingBox"
transform="scale(0.0025, 0.0025)">
<!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
<circle cx="50%" cy="50%" r="50%" />
<rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
</clipPath>
</defs>
</svg>
External SVG files are not supported by Chrome at the moment.
You can check this here:
https://caniuse.com/#search=CSS%20clip
Here is what they say about the Partial support for Chrome:
Partial support refers to supporting shapes and the url(#foo) syntax
for inline SVG, but not shapes in external SVGs.
I have some inline SVG with class names for styling via CSS selectors. I would like to bring the SVG into my CSS as a background-image data URI, but does this mean I can't use the CSS selectors anymore?
I've read the existing StackOverflow responses, and the takeaway seems to be "You can't apply CSS because it's an image or resource from potentially another site".
How do I change the colour of an SVG image in a CSS content property?
Modify SVG fill color when being served as Background-Image
But these questions were asked and answered a few years back, so I'm hoping that there is a workaround available now.
Lastly, there were some solutions where you could use SVG masking and apply a single color to parts of your SVG by setting the element's background color. This is not sufficient for my case, since I would like to use 2 to 4 colors.
Here are SVG and Data URI versions of my image:
.primary {
fill: rgb(87, 143, 213);
stroke: rgb(87, 143, 213);
}
.secondary {
fill: rgb(176, 202, 234);
}
.secondaryShadeTint {
fill: purple;
}
.youHaveMail {
fill: red;
}
svg, div#dataURI {
width: 100px;
height: 100px;
}
div#dataURI {
background-size: 100px, 100px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' width='500' height='500' xmlns='http%3A//www.w3.org/2000/svg' xmlns:link='http%3A//www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cmask id='_mail_envelope_mask' x='0' y='0' width='500' height='500' maskUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='500' height='500' fill='white'%3E%3C/rect%3E%3Cpolygon points='80%2C170 250%2C330 420%2C170' fill='black'%3E%3C/polygon%3E%3C/mask%3E%3C/defs%3E%3Cpolygon class='primary' points='80%2C140 250%2C300 420%2C140'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='80%2C420 250%2C230 420%2C420' mask='url%28%23_mail_envelope_mask%29'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='70%2C160 70%2C400 185%2C270'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='430%2C160 430%2C400 315%2C270'%3E%3C/polygon%3E%3Ccircle class='youHaveMail' cx='375' cy='160' r='100'%3E%3C/circle%3E%3C/svg%3E")
}
<h1>SVG</h1>
<svg viewBox="0 0 500 500" width="500" height="500">
<defs>
<mask id="_mail_envelope_mask" x="0" y="0" width="500" height="500" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="500" height="500" fill="white"></rect>
<polygon points="80,170 250,330 420,170" fill="black"></polygon>
</mask>
</defs>
<polygon class="primary" points="80,140 250,300 420,140"></polygon>
<polygon class="secondary" points="80,420 250,230 420,420" mask="url(#_mail_envelope_mask)"></polygon>
<polygon class="secondary" points="70,160 70,400 185,270"></polygon>
<polygon class="secondary" points="430,160 430,400 315,270"></polygon>
<circle class="youHaveMail" cx="375" cy="160" r="100"></circle>
</svg>
<h1>Data URI</h1>
<div id="dataURI"></div>
Selectors in a host document cannot query an SVG document that is embedded as an external resource as opposed to being inlined with the host document markup.
I have created a fairly simple shape using an SVG element which is then put into my CSS using clip-path. It should make the corners rounded for me but for some reason only 1 of the corners does the effect perfectly.
This is the shape:
<svg height="500" width="500">
<path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</svg>
This is what happens when i use it as a clip-path
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
It seems to work perfectly within FireFox but shows the corners aren't cut correctly in Chrome apart from the bottom right corner.
The default units for the clip-path is userSpaceOnUse and this seems to calculate the coordinates of the path with reference to the root element. This is the reason why the clip-path seems like it is producing an incorrect output. Nullifying the margin and padding on the root element or absolutely positioning the element (like in the below snippet) should solve the issue.
body {
background: #555;
}
img {
position: absolute;
top: 0px;
left: 0px;
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="http://lorempixel.com/500/500/" />
However, in a real life scenario the actual element that has to be clipped could be present anywhere within the body and hence I think it is a much better approach to use the objectBoundingBox as the units like in the below snippet:
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.1,0 L0.9,0 Q1,0 1,0.1 L1,0.8 Q1,0.9 0.9,0.9 L0.4,0.9 L0.35,1 L0.3,0.9 L0.1,0.9 Q0,0.9 0,0.8 L0,0.1 Q0,0 0.1,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
As mentioned in the question itself, this behavior is visible only in Chrome and not Firefox for reasons unknown to me. Firefox produces an output similar to the expected one even when (a) extra padding + margin is added to the body and (b) when the image itself is wrapped inside another container which also has padding + margin.
The only case where Firefox's output matches with Chrome is when a padding is added directly to the img tag itself. I believe this happens because padding is part of the element and thus affects the coordinates.
Setting a background position works on Chrome, Safari and Firefox, but not on IE 8-11. What's wrong here?
DEMO on Dabblet
DEMO on Webdevout
.logo {
display: block;
width: 200px;
border: 2px solid red;
background: url("layout/logo.png") center right no-repeat; /* fallback image */
background-image: url('data:image/svg+xml;base64,...'), none; /* two bg to only use svg on supported browsers. IE 11 uses this image */
background-position: center right;
background-repeat: no-repeat;
background-size: auto 100%;
}
UPDATE:
IE seems to ignore background positioning on SVG images. Here's a WORKAROUND DEMO
I guess the best way of doing this with a guaranty of cross-browser working is by making the background image using a pattern and then set the attributes like x,y,width or height to position it as you want directly or later in jquery via the attr method for example: $("#img1").attr("width","500");
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
and set the pattern to fill the SVG path like this
<path fill="url(#img1)" id="my_svg" d="M5,50 l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"/>
or you can set the background in this very way but in the CSS like this
#my_svg{
fill:url(#img1);
}
There is also an alternative way which i do not recommend but may be the answer in some cases and that is the transform="translate(x,y)" for the image in pattern or the patternTransform="translate(x,y)" for the pattern which is quit like the css version if it..for example:
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100" patternTransform="translate(0,0)">
<image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" transform="translate(0,0)" />
</pattern>
anyway there is always good practice to know many different ways of doing something in our job to be able to survive ;-)