I am using the <image> element within an <svg> in Safari.
Whilst the <image> displays in Chrome it does not display in Safari.
Here is my code
.swatch {
width: 10rem;
}
.swatch-base {
width: 100%;
height: 100%;
}
.filter-swatch {
width: 100%;
height: 100%;
mix-blend-mode: multiply;
}
<svg class="swatch" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 305 305" preserveAspectRatio="xMidYMin slice">
<image class="swatch-base" xlink:href="data:image/jpeg;base64,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
" preserveAspectRatio="xMinYMin" onerror="" x="0" y="0"></image>
<rect class="filter-swatch" fill="#ecd5cf"></rect>
</svg>
Please note that within my code I have inlined the image so that no external resources are used and this answer will therefore still be useful when the image no longer lives on my server. In production though, I am referencing an image and not inlining it.
How can I display the image as is displayed in Chrome?
For Safari width and height on images must be specified as attributes and not via CSS.
Using CSS on images is new in SVG 2 and Safari hasn't implemented this part of SVG 2 yet.
.swatch {
width: 10rem;
}
.filter-swatch {
width: 100%;
height: 100%;
mix-blend-mode: multiply;
}
<svg class="swatch" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 305 305" preserveAspectRatio="xMidYMin slice">
<image class="swatch-base" xlink:href="data:image/jpeg;base64,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
" preserveAspectRatio="xMinYMin" onerror="" x="0" y="0" width="100%" height="100%"></image>
<rect class="filter-swatch" fill="#ecd5cf"></rect>
</svg>
Related
Is there a way to stop this outline in firefox?
#blob { background: red; width: 500px; height: 500px; clip-path: url(#myClip); transform: rotate(20deg);}
<div id="blob"></div>
<svg>
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1"></path>
<clipPath id="myClip"><use href="#path-1"></use></clipPath>
</defs>
</svg>
This renders correctly in other browsers, just need some work around for this firefox bug
same outline appears using either clip-path or mask
As a workaround you could rotate the clipPath instead:
#blob {
background: red;
width: 500px;
height: 500px;
clip-path: url(#myClip);
}
<div id="blob"></div>
<svg viewBox="0 0 397 409">
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1" />
<clipPath id="myClip" transform="rotate(20)" transform-origin="center">
<use href="#path-1"></use>
</clipPath>
</defs>
</svg>
We are trying to display SVG backgrounds in internet explorer. Our images are always getting cut off when a zoom other than 100% is used. This can be reproduced using the following code:
with this svg
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>
div {
width: 14px;
height: 14px;
background-size: 14px 14px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' stroke='black' stroke-width='3' fill='red'%3E%3C/circle%3E%3C/svg%3E");
}
<div></div>
The result looks like this:
In all other browsers it renders fine. Has anyone else ever experienced this bug? Is there a workaround?
I have found one workaround which requires very little work:
Make the SVG image 2X size of the actual content (this would make the circle look like this:
<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>
Then use the :after pseudo element to create an inside element with 2x the desired size. So the html would be
<div class="circle"></div>
And the css would be
.circle {
width: 14px;
height: 14px;
position:relative;
}
.circle:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 28px;
height: 28px;
background-size: 28px 28px;
background-repeat: no-repeat;
background-image: url('circle.svg');
}
The extra space in the :after pseoudoelement gives IE spare canvas to draw on, but both the visible icon and the space occupied by the original container remain the same.
I am trying to display a simple bar in the browser using svg but for some reason it is not displaying. Here is the code I am using. It does not display the bar.
<h3>SVG Bar</h3>
<svg>
<rect with="50" height="200" style="fill: blue"/>
</svg>
What am I missing?
You've written your width attribute as "with".
But even correcting the typo, you can make a few more improvements:
svg {
border: 1px solid black;
width: 20vw;
height: 20vw;
}
<h3>SVG Bar</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 1000">
<rect x="0" y="0" width="200" height="500" style="fill: blue">
</svg>
I am trying to replicate this HTML in an SVG:
<div>
<img src="tallimg.jpg">
</div>
div {
overflow: hidden;
width: 10%;
height: 50%;
}
img {
width: 100%;
height: auto;
}
So far I have something like this:
<svg>
<defs>
<clipPath id="clip-path">
<rect x="0" y="0" width="600" height="400"></rect>
</clipPath>
</defs>
<image x="0" y="0" width="100%" height="auto" xlink:href="tallimg.jpg" clip-path="url(#clip-path)">
</svg>
This almost works but the image is the wrong size because height="auto" isn't supported in SVG. Instead it interprets auto as 0. If I use height="100%" width="100%" instead, it is scaled to fit inside its container.
Is it possible to do this with pure SVG? Would I be better off layering the HTML equivalent over the top of the SVG?
I work on a app which supports on IE 10 and Chrome. For background images we go with svg sprite.Wherever we need to position icons we have defined a common class for the image and also defined class based on the icon.
Once we build the app, we found the positioning is fine on chrome browser and for IE we need to write a separate css fix based on the browser.
html
<ul>
<li><a class="pico menu href="javascript:void(0)">Home</a></li>
</ul>
My css looks like
.pico:after{
background:('sprite.svg') 0 0 no-repeat;
background-size: 280px 660px;
position:absolute;
content:""
}
.pico.menu:after{
background-position:-106px 6px;
}
.ie .pico.menu:after{
background-position:-110px 6px;
}
Is there anyway to have a generic styles for IE and Chrome ?. Or is the default behavior of the browsers.
<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="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve">
<g>
<g>
<polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229 "/>
</g>
<g>
<polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6 "/>
</g>
</g>
</svg>
Here i cleaned up some of the code. Don't use the external url for your images of course.
Tested in chrome and IE 11 and IE 10. Both will display the image correctly.
.pico::after {
background: url(http://imgh.us/test_55.svg) 0 0 no-repeat;
background-size: 280px 660px;
position: absolute;
content: "";
display: inline-block;
width: 30px;
height: 20px;
}
.pico.menu::after {
background-position: -10px -65px;
}
svg {
border: 5px solid black;
}
<ul>
<li><a class="pico menu" href="javascript:void(0)">Home</a>
</li>
</ul>
<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="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve">
<polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229 " />
<polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6 " />
</svg>