Example here
<svg width="978px" height="668px" viewBox="0 0 978 668" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="top" width="1" height="1" viewBox="0 0 717 478" preserveAspectRatio="xMidYMid slice">
<image xlink:href="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="717px" height="478px"></image>
</pattern>
</defs>
<g>
<path d="M1,95.0771484 L1,0 L979,0 L424.030762,379.068604 L1,95.0771484 Z" fill="url(#top)"></path>
</g>
</svg>
Open in Firefox to see image stretched (undesired effect)
Open in Chrome to see image sliced (desired effect)
I read Crop to fit an svg pattern, which was close to solving the problem.
It appeared to work only on 'circle's #2 and #3.
When I applied my 'path', image got stretched again.
They mention a Firefox bug, but it is marked as 'fixed'.
How can I get my image sliced across browsers?
This is fixed from Firefox 40 onwards by bug 1047973. I think that's currently available as Firefox developer edition but will be out in the production version on 11th August 2015
Related
im using svgPicture to show the image and every time at first it showing error and then it showing image.
SvgPicture.asset(
'assets/Images/otpLogo.svg',
height: SizeConfig.blockSizeVertical * 26,
),
and the error is
══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
I/flutter (18256): The following assertion was thrown in _getDefinitionPaint:
I/flutter (18256): Failed to find definition for url(#paint0_linear)
I/flutter (18256): This library only supports and xlink:href references that are defined ahead of their
I/flutter (18256): references.
I/flutter (18256): This error can be caused when the desired definition is defined after the element referring to it
I/flutter (18256): (e.g. at the end of the file), or defined in another file.
I/flutter (18256): This error is treated as non-fatal, but your SVG file will likely not render as intended
I'm not sure if this is the exact problem since you did not provide the code to the SVG file but according to the error message, it says:
This error can be caused when the desired definition is defined after the element referring to it...
For me, anyway, the solution was to edit the SVG file and move the <defs> tag and all its contents up to just below the opening of the <svg> tag.
You can improve and optimize your SVG code structure by using this online tool. Then simply cut and paste the defs as explained above.
Nonetheless, there is still an open issue in the repo about this particular problem.
Sample Case:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd" transform="translate(8 6)">
<mask id="prefix__b" fill="#fff">
<use xlink:href="#prefix__a"/>
</mask>
<g fill="#FFF" mask="url(#prefix__b)">
<path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
</g>
</g>
<defs>
<path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
</defs>
</svg>
Fixed version:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(8 6)">
<mask id="prefix__b" fill="#fff">
<use xlink:href="#prefix__a"/>
</mask>
<g fill="#FFF" mask="url(#prefix__b)">
<path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
</g>
</g>
</svg>
Note: Notice the changing position of the defs tag.
Before in my svg file:
<svg>
<g>
...
</g>
<defs>
...
</defs>
</svg>
After in my svg file:
<svg>
<defs>
...
</defs>
<g>
...
</g>
</svg>
Move <defs></defs> to up!
Some informations about this behaviour.
This can occur if you export from Figma for exemple.
And be sure to put <defs></defs> just after the <svg opening tag. Even if you have something like <path at the top
I ran into the same thing after downloading SVG from Figma.
Then I tried to
Download a PNG file from Figma
Import it into Adobe XD
Then Export it to SVG from Adobe XD.
And this worked for me.
The error means that the SVG was not exported correctly. The layer in question connected to the user might not render as intended.
The successful rendering really depends on each individual device so if it shows correctly for e.g. iOS Simulator does not necessarily mean it will render correctly on every device (and in my experience, it doesn't).
The solution might be to try to export it differently, or if possible to switch it for example to PNG.
The error message actually tells us how to fix it:
Failed to find definition for url(#g1)
This library only supports <defs> and xlink:href references that are defined ahead of their references.
That means if your svg is :
<svg>
<rect fill="url(#g1)"/>
<defs>
<radiusGraident id="g1"> ... </radiusGradient>
</defs>
</svgs>
Please make the <defs> ahead of its usage. So the below svg would work :
<svg>
<defs>
<radiusGraident id="g1"> ... </radiusGradient>
</defs>
<rect fill="url(#g1)"/>
</svgs>
If the rearranging defs to the top solution doesn't work, just remove the pattern, rect and defs tag and only leave the image tag
if you have png from svg image then follow these steps:
1- Convert png to svg through this link: https://express.adobe.com/pt-BR/tools/convert-to-svg
2-After converting png to svg, insert it into your project.
3- If the background of the image does not have transparency, open the image file in the IDE (Android Studio or Visual Studio), showing the image code, go to the third line or close to it, change the option "opacity" to opacity=" 0"
When using the Flutter SvgPicture package, I fall into the same problem.
I solve this issue by exporting the file from Figam as PDF and then converting the pdf file to SVG.
Here are the steps I follow:
Save as (.pdf) from Figma/Adobe XD.
Go to Zamzar and convert the PDF file into SVG Image.
Use this image & Boom !!!
The problem is solved !!!
I'm working on a drawing app that uses a background image. The container and background image are scaled with the browser window.
However, the lines that are drawn are not scaling with the container/background. So something that goes from 1,1->50,50 on a 100x100 drawing, ends up going all the way across the image if the browser scales the image down by 50%.
Is there are markup for paths that enables such scaling to work (example svg below).
I've tried preserveAspectRatio and setting the viewBox.
<svg>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./background.svg" height="100%" width="100%"></image>
<g>
<path class="shot" d="M243,190 L650,199"></path>
<path d="M242.77892382381336,199.9975559675514 L649.7789238238133,208.9975559675514" class="shot-parallel"></path>
</g>
<g class="active">
<path class="shot" d="M269,321 L411,368"></path>
<path d="M265.8577860915356,330.49349734046694 L407.8577860915356,377.49349734046694" class="shot-parallel"></path>
</g>
</svg>
I've run into an issue on older versions of firefox, (in particular 38.2.1)
where a D3 animation of and SVG component results in rendering issues ( looks like its just not repainting the background).
a Minimal example below
https://jsfiddle.net/4n2f9g81/2/
<svg width="600" height="600">
<g transform="translate(36, 24)">
<g class="group" transform="translate(200)" >
<circle class="circle" fill="white" r="20" stroke-width="2" stroke="#7ab800"></circle>
<g class="label" >
<line y1="-25" y2="-40" stroke="#7ab800" stroke-width="1" shape-rendering="crispEdges"></line>
<text text-anchor="middle" class="peer-label position" y="-45" style="-moz-opacity:0">label text</text>
</g>
</g>
</g>
</svg>
d3.select('.group').transition().duration(5000).attr("transform", "translate(0,100)");
It only occurs when the g element with the class label has some content.. if it's empty or hidden there's no corruption and the animation works fine. since it works in more recent version (and in other browsers) I assume I've hit a firefox bug which has since been resolved.
I'd like to know if there's a workaround for this on these older versions. I've tried a couple of things like forcing a background fill or forcing opacity, but not had any success as yet.
No matter what I try, I can't get this SVG gradient to work properly in the most recent Safari (5.1.7) on Windows:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 200">
<linearGradient id="g186" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0" y2="200">
<stop stop-color="#0A306A" offset="0"/><stop stop-color="#030C1B" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1920" height="200" fill="url(#g186)" />
</svg>`
JSFiddle:
http://jsfiddle.net/wumnb/1/ (Note that the browser may throw an XSS warning because of the base64-encoded SVG)
When I include -webkit-background-size: 100% 200px; with and/or without the -webkit-, it re-sizes the SVG, but it looks significantly lighter than every other browser; almost as if it was cropping a full-page version of the SVG from the top to 200px from the top.
I've tried both answers from the other two questions I could find, but neither is working.
It turns out that preserveAspectRatio="none" needs to be preserveAspectRatio="xMidYMax meet" with viewbox set to the wanted dimensions. Sadly, this doesn't allow for percentages, but it's better than nothing.
W3 documentation for preserveAspectRatio.
EDIT: Upon playing with this more, I've discovered that background position is really weird in Safari. The xM(in|id|ax)yM(in|id|ax) part of the preserveAspectRatio seem to determine where the SVG will go on the page, rather than do what's described on W3.
It appears (to me at least) that xMidYMax is the equivalent of background-position: center bottom; and xMinyMin is the equivalent of background-position: center top;
Hi everybody i need to animate an svg. It works perfectly in chrome, firefox and safari too, but naturally it don't work on Internet Explorer.
This is my code
<g>
<path fill="none" d="M254.587,356.68
c0-31.728,25.72-57.448,57.448-57.448c31.728,0,57.448,25.721,57.448,57.448c0,31.728-25.721,57.448-57.448,57.448
C280.307,414.128,254.587,388.408,254.587,356.68">
<animate id="cerchio" attributeName="stroke-dashoffset" from="0" to="0" dur="3s"
begin="startAnimation1.click+1.0s"
fill="freeze" keySplines="0 0 0 0" calcMode="linear"/>
</path>
</g>
I tried to use svgweb but it seems don't work with stroke-dashoffset attributeName.
Any ideas?
IE9 supports SVG. Use VML for IE8 and below.
To check if your browser supports SVG or VML take a look at this answer.