ehm, right now I'm trying to vectorize and old logo my friend did for a club at my uni. I have the logo as .ai and find a converter to svg.
When I open that converted svg logo in my browser it appears great.
Here's a print screen of how it looks in firefox.
Also, when i open the logo on Inkscape, it also appears great.
Here's how it looks on Inkscape.
Nevertheless, when I open it on Corel Draw, it is a complete mess.
How it looks in corel.
I found that some of the objects are causing some trouble, the stars and some other things. If i delete them, the logo appears a little bit more understandable in corel, but still doesn't look great. Logo with less details.
I'm trying to use the logo to make some banners, posters and things like that, and the printer can't use that version of the logo because they use corel.
Does someone know why is that happening and how to correct the issue?
I'm gonna left the .ai as the .svg in case somebody need them to undestand the issue. ai and 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,
),
)
I am experiencing two weird things happening with svg rendered in safari (works fine in Chrome/Edge/FF and heck even IE)
Lines not defined in SVG will appear and disappear randomly when panning around.
Lines defined in SVG might disappear randomly when panning around.
Not really that easy to describe so I made a video for it
https://youtu.be/BqlItab0k_g
I did not use any fancy SVG feature like script or media query. The only elements used are text/path/rectangle.
The SVG is generated by me and optimized using SVGO
[Codepen](https://codepen.io/alt22247/pen/vwzBmL)
The svg is base64 encoded since I can't upload svg to code pen. Had to use code pen instead of SO built in since the base64 encoded img text exceed SO limit. Feel free to decode it back to text.
I can't think of any way to mess up the SVG without causing a parse error so I believe this is a Safari bug. But we need to support Safari regardless (typical life of a web dev).
So the question is: What is causing this and is there any work around I can do rather than wait for Apple to fix it 10 years later?
I’m working with an SVG on a website, and everything works fine except in Safari. Safari displays my SVG with a completely different font than what I used for the graphic.
Correct Rendering
This is how it’s supposed to display.
Safari Rendering
This is how Safari renders it.
I don’t have a lot of experience with using SVGs in web design, but I’m using CSS to set it as a background-image like I would anything. I can’t figure out what I’m doing wrong.
.titleContainer{
background-image: url(‘../img/logo.svg’)
}
This is most likely because you should "convert to outline" when you export the SVG from your design program. I could imagine that you selected to embed the font.
Ie in Adobe Illustrator you have the option to outline the font when you export:
Adobe Illustrator example
I am seeing a strange issue in Safari 10 that may be present in earlier versions. When SVG content is present in the document along with a content editable div the text is disappearing. This happens mostly when selecting text, but also while toggling the display property of the svg content. Here are a few videos showing the behavior: http://www.screencast.com/t/CeyFqYyfeFZW
http://www.screencast.com/t/eRAGsopA
I can't make the application available publicly. We have a pretty complex document composition layer which is probably to blame. I'll try posting an isolated test later. I have only observed this issue on Mac OS X Yosemite (10.10.05). iOS seems to be fine. If anyone has seen this issue before please let me know. Thanks!
After a bunch of tests I figured out that in this particular example the problem is caused by the situation when editable text has higher z-index than image (raster or svg). Image can be placed anywhere, but not geometrically below the text. This issue also is specific to Safari 10+. Testing the original example in 9.1 everything works.
I have created a simple example testing z-index https://jsfiddle.net/xngmocxm/9/
There is a background element, which is jpeg, it has z-index = 0, 2 svg path elements (grey and red), 2 editable text elements and svg image (HomeSmart in the top left corner).
Z-index of the left text element is set to 30, right one has z-index 20, svg image z-index is set to 25, i.e. in between 2 text elements. In test browser I can see that in this case only the left text disappears, right one is shown and selected just fine.
So the svg that is above the text does not manifest the issue, but if the SVG is below the editable text this issue occurs.
If image content is jpeg, it also causes same issue:
img src https://jsfiddle.net/xngmocxm/12/
Anyway I was able to fix this by setting overflow to hidden on image wrapper of the problematic image element. I think this a is Safari bug and not intentional behavior.