SVG Rendering Error - svg

I've made a vector graphic in Illustrator and cannot seem to get it to show up after saving it as SVG 1.1. I keep on getting this error, and it has made it so that my entire graphic won't even show up:
error on line 8 at column 93: Namespace prefix inkscape for connector-curvature
on path is not defined
I'm not exactly sure what that means and I've looked in the SVG code and cannot figure out what to do to fix it.
What does that error mean and how do I get rid of it?
Thank you - responses are much appreciated!


If your file has elements with the inkscape namespace, that suggests it has originated in Inkscape. Or have you perhaps merged in part of an SVG that came from Inkscape?
What this error suggests is that the file has inkscape attributes without the inkscape namespace being defined.
Try this: go through the file and delete any attributes of the form inkscape:whatever="something". That should solve your problem.
If it doesn't, you may need to post the file somewhere so we can look at it.


The file was created in Inkscape and placed in Illustrator, so it preserved the namespace declaration. Instead of editing the file by hand, try to do something to the image to make illustrator re-stroke-and-fill it. For example, Merge in pathfinder. If you can get Illustrator to remake it in its own way, the namespace will drop off.

Related

Absolute Positioning of Text in a Dynamically Sized SVG

I have an SVG graphic that I want to put some text on from my PHP variables. The graphic was generated in Illustrator and resizes in my web page to 100% width. Here is a representation of it:
How could this be done for the 8 text items? Does something special need to be done in Illustrator, like creating an anchor point for the text? How do I update the text item? I've done research but haven't been able to find a similar situation.
Thankful for any information that could help me narrow down my search.

Being someone who has never worked with files of .SVG file type before, this was a misunderstanding.
If you design a graphic in Adobe Illustrator, save it as an SVG and edit it with your favorite text editor, you will be able to see the SVG mark-up. It all makes sense now, and here you will be able to change the text at the code-level.
For my application, I saved the SVG as a PHP file and did an include on it, while changing the raw text to PHP variables in said file. This allowed me to pass my dynamic text as variables to the graphic.

I'm trying use flutter svg, but load with black svg

I'm trying to use Flutter SVG dependency, i put in the svg in assets, set in pubspec.yaml, and set in my widget, but, the svg load with black container
I've already tried change the svg, and the another svg works fine, but the other not...
final Widget svg = SvgPicture.asset(assetName, semanticsLabel: 'Acme Logo');
the svg in flutter
Here the svg
My expected response was colored svg like the link in codepen, but i got this

This is probably happened because of the corrupted SVG files from the internet. I faced this problem earlier and tried many ways to solve it. But finally, I solved it with the help of this software, svgcleaner.
Download the application into your OS, from here
After installation,
import your SVG.
Click run.
Success! Here you can see your SVGs' cleaned successfully.
After cleaning, you can grab those SVG files from the output folder location and add those files into your flutter app without seeing any black coloured SVG.
It works perfectly fine like this.

I think I am late but this might just help someone. Just make all the styles in your svg image use inline styling otherwise all colors and styling won't be rendered as the tag is not readable by the SvgPicture.

I tried this SVG asset with the latest version of jovial_svg, and it works great! Here's the result:
This version of jovial_svg should be released in a couple of days, but for now it's 1.1.4-rc.4.
(This asset helped me flesh out stylesheet support - thanks!)

I found this site it solved my problem with the svg file that was out of color.
https://iconly.io/tools/svg-cleaner

use this configuration in illustrator before you add it to your project.
https://user-images.githubusercontent.com/2842459/62599914-91de9c00-b8fe-11e9-8fb7-4af57d5100f7.png

If You don't have solution try to convert your image from svg to png and use:
Image.asset('assets/images/image.png',)

Some SVG images uses style tag and if you try to load such image using flutter_svg, image won't render as expected. Currently flutter_svg supports styling through inline styles only and not the style tag that some of SVG files may contain (in my case, I exported image from Adobe XD and it has all styles in tag). When you try to load such SVG images, you will get below error:
======== Exception caught by SVG =================================================================== The following UnimplementedError was thrown in parseSvgElement: The
element is not implemented in this library.
Style elements are not supported by this library and the requested SVG
may not render as intended.
If possible, ensure the SVG uses inline styles and/or attributes
(which are supported), or use a preprocessing utility such as
svgcleaner to inline the styles for you.
This error mentions to use inline style instead of style tag, you can use svgcleaner (as mentioned in #Alif's answer) or similar utility to convert SVG file with inline styling.
For more detials, refer this link to check SVG compatibility with flutter_svg and handling other use-cases

try this:
Container(
child: SvgPicture.asset(
'assets/images/image.svg',
fit: BoxFit.contain,
),
)

Exporting Illustrator to SVG, Colours, Gradients and Opacity wrongly displayed

I'm having trouble creating an SVG (for web use) from an illustrator file sent by the design agency. The SVG exported doesn't look like the same, specially because the affected areas are suppose to look like shadowed areas of human characters. The art created is quite complex and I'm not authorised to show it, but I'm just putting here one of the elements that replicates the issue.
original .ai file + exported .svg in this zip: http://we.tl/AdJPqFqQd1
I've also saved it in .eps and tried exporting, but it didn't make a difference
I'm looking for a solution that wouldn't be too hurtful considering that there are many elements in the original artwork like this shape and most of them have different colours and shapes.
I tried to access the CSS within the SVG but I couldn't manage to change the gradient.
Using Illustrator CC 2015 I've tried exporting with all the different options (unless I missed some special combination, which I do not believe)
Hopefully and with a lot of luck, I would like to find someone who came across this problem before and knows how to deal with it. If you could try it yourself, you would be aware of this issue and I would appreciate it very much. Thanks

SVG file looks different in webbrowser than in Illustrator

I've been doing some stuff in Illustrator and I have a problem with saving a project in to SVG file that I open in webbrowser, It just looks different.
And it hapens only in SVG, if I save it to PDF or PNG it looks how it should.
What am I doing wrong?
That's how it looks in Ai
That's how it looks in webbrowser
Here's a link to download rar file with .ai and .svg that I have.

Since all browsers render it the same way, it would seem likely that this is a bug in the AI SVG export filter.
To me it looks like you are applying a blend mode ("Overlay" perhaps?) to the white parts on top of the image. That effect ought to be reproducible using SVG filters, but perhaps AI's exporter doesn't support that yet.
If you are using an "odd" blend mode, try changing it, or reproducing the effect another way.

Individual pixel control needed in identical svg conversion is not possible. SVG creates only specific shapes. The Ai app conversion seems to use opacity to provide the color shades. You could probably tweek opacity and add some svg filters to improve the svg.

Print your design in a . pdf file instead of exporting it directly. Then open the printed .pdf back in Illustrator and export the .svg from this one, it shoud do the trick.

How do I save an SVG file to see it in browsers?

I can't understand how to save an SVG image for using it in broswes.
I can see this, but can't see this.
I need your help. Thank you :)

The svg is malformed in your second example. Pulling it up in Inkscape shows that you've got some problems with mis-matched quotes. It looks like your Illustrator is having some issues with export for you. Does this render correctly in Illustrator?

Resources