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'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.
I'm just starting to deal with Svg, so Im not really aware how to deal with all the effect,
I'm looking to do an small effect animation, exactly like this website: http://www.resanova.fr/
The idea would be to scale my svg image from the bottom to the top like you can see on this website.
I've try the following:
<animateTransform attributeType="xml"
attributeName="transform"
type="scale"
from="0"
to="1"
dur="0.5s" fill="freeze" />
But without success, that just does a normal scale effect instead of the bottom to top . . ..
--EDIT--
Please fidn attach my svg on jsfiddle if it helps :)
https://jsfiddle.net/v3p9gLjx/3/
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
I recently created an animation with few images and now the full animation only shows in Firefox. In all other browsers (IE, Google Chrome, Safari), the parts of the animation are missing, basically I used movement and opacity attributes. Is there any way to solve these problems. Thanks.
EDIT:
I can't post the full code, but here's some of it. Hope this will help
<animateTransform
attributeName="opacity"
begin="3s"
dur="3s"
type="CSS"
from="100"
to="0"
repeatCount="1"
/>
<animateTransform
attributeName="transform"
begin="0s"
dur="3s"
type="translate"
from="0 -330"
to="0 0"
repeatCount="1"
/>
<animateTransform> is for animating transforms only, doesn't work with opacity. Just replace that one with <animate> instead and it should be fine. And remove type="CSS" while you're at it.