I have a problem when export from *.ai file to *.svg file. When I used web browser to view *.svg file, image is not correct ( Leaf vein is lost ). See image below:
Environment:
OS: Windows 10, Mac OS 10.14.2
Illustrator: Adobe Illustrator CC 2019
Original AI file: lost_item_test.ai
Exported SVG file: lost_item_test.svg
Select File -> Save as ... --> choose SVG ( svg ) --> click button "save"
SVG options dialog choose option like attach image.
click "OK" to save to SVG file
Expected:
Display in SVG is the same with AI editor
Actual:
+ SVG is lost or invisible some objects ( Leaf vein is lost )
Here is my export Option:
Please help me resolve this problem.
Thank you
I played a bit around with the code and noticed that there is a styles section in the svg. when i start deleting some of the styles in there the veins start showing up again. i think there are some styles that the browsers dont seem to support?
i'd recommend looking into those styles and maybe the colors.
there is also a series on https://css-tricks.com/lodge/svg/ i'd scroll around to see if there is one that you perhaps could use!
Related
Markers in SVGs are not rendered on the GitHub website.
This happens only on the website, the Android app doesn't have the same problem.
Markdown file with the problem
The SVG was created using Inkscape.
When I noticed the problem, I changed the file to an optimised SVG (File -> Save As -> Optimised SVG) but didn't observe any changes.
Edit: The situation is thornier than I initially assumed.
Firefox doesn't display the markers at all while Chrome and Edge show them in black. The images on this page appear differently on different browsers.
I manually edited the XML to colour the markers and ended up with this file. .
But Inkscape doesn't show the red outlines on the markers.
Edit: This is not a GitHub problem as I had initially suspected but an Inkscape(+Firefox) one. Still unsure whether Firefox is responsible.
Update:
Because the browsers still do not support all SVG2 features, there is a better workaround in Inkscape to fix that issue:
Select Edit > Preferences.
From the tree on the left, select: Input/Output > SVG export
Under "SVG 2 to SVG 1.1" check the two checkboxes to use the correct direction and colors (as shown in the screenshot below).
Now save the SVG file as follows:
File > Save as.
Check the box: "Export as SVG 1.1 per settings in Preferences dialog"
Now the markers should be rendered correctly in the browsers.
Note for Windows users:
For Windows users, you need an extra step in order to enable the "Export as SVG 1.1 per settings in Preferences dialog" option. To enable it:
Select: Edit > Preferences.
From the tree view select: Interface > Windows.
Under "Desktop integration" enable the option "GTK open/save dialogs", as shown in the screenshot below:
Old answer (but still relevant)
This is a known issue (see here). A workaround is to use the following extension to color the markers:
Extensions > Modify Path > Color Markers…
MDN says, (Highlight mine)
<marker-ref>
This value is a reference to a <marker> element, which will be drawn at the final vertex. If the reference is not valid, then no marker will be drawn.
In this file, notice the attributes fill="context-stroke" and stroke="context-stroke" on the <path> in the <marker>s.
Removing them fixes the problem. Still haven't found a direct way to do this from Inkscape.
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,
),
)
In inkscape I saved the file as plain svg or as inkscape svg format. The file size on hard disk is about 1.59 MB
Then in blender I opened the add-ons window and searched for svg and check the first addon I also tried to check the second one but it didn't work in any case.
Then I did in blender: File > Import > Scalable Vector Graphic (.svg)
And selected the file and clicked on import SVG:
Then it's thinking for some seconds and then it's staying in the opening window showing the cube. Tt didn't load the file:
In the Inkscape I loaded/opened this jpg file:
Then selected it and then in the Inkscape I did:
Path > Trace Bitmap...
Then clicked on Update and then on OK
Then saved it as SVG and then tried to import it in blender.
The main goal is to use inkscape and blender and to convert the image to 3d object.
I am trying to get the path data points from an SVG file I am creating for an image-map. The code should look like the below after I save to an SVG file:
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
However, when saving and/or exporting the file, I am getting a bunch of gibberish instead of data points and it looks like the below:
<image id="image4125" opacity=".5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAAEUCAYAAAAskArpAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAJYNJREFUeNrsnQd8FNX2x6dsb9nN 7qb3SrqU0ATpIcEnIA9QKRZEUB/6pINYEFFqDH8bwkOeFJGm0t5LqIbewZBAIKQXAtlNdtO37z83...
I have tried using both Adobe Illustrator CC and Inkscape. Any idea how to extract the correct data points using either of these programs, or why I am getting gibberish instead of the data points? I have followed multiple instructions on different websites (including this thread on StackOverflow).
Right now I can get data points to make a rectangle of each area, but the rectangular data points overlap and conflict with other. I am trying to create a polygon path and extract the data points so each shape is unique. Any help is much appreciated.
After a week of research and many tears shed, I finally found the solution. To create SVG images with the path data included when using Adobe Photoshop and Illustrator CC, follow these instructions:
Cut up your image using Photoshop with layers of the image. Save the file as .psd.
Open .psd file in Illustrator. You will then be able to select the different images you cut up in Photoshop.
Select a single image. Open up image trace and trace the image using the Silhouettes preset option.
Click on the Expand button (you will notice the silhouette of your image now has points around the edges; these are your data points).
Open up the color palette. Make the top color white with a red line through it (this removes the fill of the silhouette). Then make the bottom color black (this traces over the trace line between the points).
Finally, on the Attributes panel, you will want to set the image map to Polygon (you can add a new to the attribute below if wanted).
After you repeat these steps over each image layer, you will then save the file as an .svg file with the following settings:
• SVG Profiles: SVG 1.1
• Subsetting: None
• Image location: Link
• Preserve Illustrator Editing Capabilities: unchecked (this will reduce the size of your file for better performance.
• CSS Properties: Style Elements
• Output fewer tspan elements: checked
• Use textPath elements for the text on path: checked
• Responsive: checked
After the file is saved with these options, you will then be able to open the .svg in Sublime, WebStorm, TextEdit, etc., and the path data will be included in the HTML. It is a beautiful sight! Hope this helps whoever is seeking the answer to my same problem!
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.