<svg id="button-svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve">
<defs>
<pattern id="pattern1" height="100%" width="100%">
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation="2.2" />
</filter>
<rect height="100%" width="100%" fill=${backgroundColor}></rect>
<image id="image" xlink:href=${backgroundImage}></image>
</pattern>
</defs>
<circle id="circle" cx="20" cy="20" r="20" filter="url(#shadow)" fill="url(#pattern1)"/>
</svg>
I have tried multiple solutions from stackoverflow but none seem to work. Can anybody please help me on this?
Note: both filter and the fill color are showing. It’s only the image that’s missing.
Demo: https://codesandbox.io/s/svg-safari-image-t9ng3?file=/src/index.js
Edit: Thank's to Robert Longson's answer I found out that you need to set the height and width explicitly in the image tags 'height/width' attribute for the image to show in Safari. Now I have another problem if the height/width is supposed to be 'auto', removing the attribute from the image tag works in Chrome but the image again disappears in Safari. Is there any fix for this?
Safari needs the image to have height and width values.
Using the image's native width and height i.e. a default value of auto is a change in the new SVG 2 specification. Firefox and Chrome have implemented this and I imagine Safari will too at some point.
Related
I'm facing a weird bug which cause background of Blockly shows random image
The correct background should be like this:
But it shows random image (mostly favicon?) instead
It's really too weird to describe in words, please take a look at this screen record
I extract svg from Blockly (which I used in the video) that can reproduce the bug
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="blocklySvg" width="1209px" height="270px" style="display: block;">
<defs>
<pattern id="blocklyGridPattern5105292194395497" patternUnits="userSpaceOnUse" width="25" height="25" x="1202" y="219">
<line stroke="#ccc" stroke-width="1" x1="11" y1="12.5" x2="14" y2="12.5"></line>
<line stroke="#ccc" stroke-width="1" x1="12.5" y1="11" x2="12.5" y2="14"></line>
</pattern>
</defs>
<g class="blocklyWorkspace">
<rect height="100%" width="100%" class="blocklyMainBackground" style="fill: url(#blocklyGridPattern5105292194395497);"></rect>
</g>
</svg>
Is this a bug related to Chrome? or I misconfigured something?
Additional info about my environment
Chrome 56 (seems only happens in Chrome)
MacOS 10.12.4
After doing some investigation, I think this is a bug of Chrome.
I already reported it to Chromium, and they can finally reproduce this bug.
I answer my question just for record, in case someone have same issue.
I've been having problems with symbols in SVG files. They are currently not displaying in browsers.
For example I created this basic SVG file in inkscape to show the problem:
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100" width="100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<symbol id="circle">
<circle style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" stroke-width="3.257" stroke="#008000" cy="1000.1" cx="34.598" r="12.879"/>
</symbol>
</defs>
<g transform="translate(0 -952.36)">
<use xlink:href="#circle"/>
</g>
</svg>
And it should look like this:
But for some reason its not displaying as such in chrome, does anyone know why?
You're drawing the initial symbol mostly outside the viewbox - your viewBox is 100 x 100, but your cy is 100.1. This seems to disable drawing completely, so when you bring it back into the viewbox with the translate, there's nothing there. Adjust your cy so you're drawing inside the viewbox and reduce your translate to compensate.
Our svg icons included using the img tag are getting incorrectly resized, cut off, or completely hidden when displayed in IE9.
The solution in https://gist.github.com/larrybotha/7881691 (setting the viewBox, removing width and height) does not help and neither does including the images as background.
When included using the tag, the SVGs display properly (but then they do not display in some modern browsers like chrome)
One of the icons we use has the following source:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by IcoMoon.io -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 640 640">
<metadata id="metadata167">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<path id="path161" fill="#c6c6c6" d="m227.88,640.44c-19.924,0-38.795-9.298-50.887-25.329l-163.69-216.1c-21.298-28.12-15.756-68.15,12.367-89.45,28.169-21.34,68.155-15.76,89.456,12.37l107.68,142.17,270.79-434.72c18.64-29.909,58.03-39.07,87.98-20.428,29.91,18.596,39.07,58.032,20.39,87.942l-319.85,513.45c-11.13,17.909-30.321,29.131-51.345,30.047-0.96187,0.0458-1.9237,0.0458-2.8856,0.0458z" stroke="#c6c6c6"/>
</svg>
Any idea on what we could do to make SVG render properly in IE9?
I can't be sure that this will answer your question without seeing the specific code you're having problems with, Jakub. But I always include the following attributes in every SVG element, as a minimum. This always gives me a good level of cross-browser consistency, back to IE9:
<svg height="40" version="1.1" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">
If that doesn't help, could you share your code?
Wrapping the svg into a div and giving that a width seems to work fine for me.
http://codepen.io/anon/pen/qONXzz
.svg-test{
width: 50px;
}
It seems that the only method for embedding and resizing an external xml file that works correctly in all browsers is the one described in http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
So instead of
<img src="./images/icons/icons-complete.svg" style="width: 11px;height:11px;"/>
you can use
<svg height="11" width="11"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="scale(0.0172)">
<image x="0" y="0" height="640" width="640" xlink:href="/images/icons/icons-complete.svg"/>
</g>
</svg>
Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?
I'm creating a browser-based tool that works in modern browsers.
Playing around with the shape-rendering attribute doesn't give me the results I'm looking for.
I want my elements to have nice anti-aliasing so that the paths look smooth like below with shape-rendering: auto:
But I also want elements that don't require anti-aliasing, like the start box to look sharp and crisp, such as when rendered with shape-rendering: crispEdges:
Is this possible? Am I looking to have my cake and eat it too?
Perhaps you set shape-rendering property for root svg element.
You should set shape-rendering property for each shape elements, like this.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black"/>
<path d="M80,30l100,100" shape-rendering="optimizeQuality"
stroke="black" stroke-width="5"/>
</svg>
If you want your boxes to appear sharp without any blurring due to antialiasing, and without using crispEdges mode, make sure the line edges are on pixel boundaries. So, for example, if your lines are an odd number of pixels wide, give them coordinates that are at 0.5 of a pixel.
<rect x="10.5" y="10.5" width="150" height="20"
stroke-width="1px" fill="none" stroke="black"/>
And on the boundary if the stroke width is even.
<rect x="10" y="10" width="150" height="20"
stroke-width="2px" fill="none" stroke="black"/>
Of course, this only really works if your SVG is being rendered at 1:1. That is, it's not being rescaled by the browser. And only for lines that are horizontal and vertical.
[I'm posting this as an answer rather than a comment, because I want to post a picture. Otherwise, this is a comment on the useful post by #defghi1977 . +1 to him, by the way.]
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black" />
<rect x="10" y="50" width="150" height="20" shape-rendering="auto"
fill="none" stroke="black" />
<path d="M40,30l100,100" shape-rendering="crispEdges"
stroke="black" stroke-width="5" />
<path d="M80,30l100,100" shape-rendering="auto"
stroke="black" stroke-width="5" />
</svg>
Produced
This was rendered by Firefox 38.0.5 .
In Internet Explorer 11, both shape-rendering setting produces the same result with anti-aliasing and not crisp.
I am try to make image gray-scale work on IE 10, after some search use svg can archive it, but now I meet another problem, here is the code make image gray-scale work on IE 10
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://thecybershadow.net/misc/stackoverflow.png" />
</svg>
the problem is the image not scale by size I give, for example, if the image's size is 200 X 1000 and I give the size 200 X 500, it will scale the image to something like 100 X 500
I tried preserveAspectRatio http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute seem not work
so my question is how to make the image resize to the size I given?
thanks in advance
If you want the image to stretch to fill the width and height you specify exactly (horizontally and vertically), use preserveAspectRatio="none".
<image x="0" y="0" width="400" height="377" xlink:href="blah" preserveAspectRatio="none" />
not find the absolute solution but this work around fit our needs
use preserveAspectRatio can make image almost fit the size I give and beyond part will be croped, so is I can let image's proportion similar to the size I given, it will be fine
<image preserveAspectRatio="xMidYMid slice" filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.0.10:3000/uploads/photo/609/address/a219c3c5eb8fdce852a61385ae31bc7ee270fc73.jpg" />