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
Related
Problem
I am importing an SVG file into my Figma design file. The asset originally has a transparent background. After importing it into Figma, the background becomes black. I've used the asset elsewhere and I know it's transparent. I've searched the Figma help center, forums, and Stack Overflow, and cannot find any relevant information. I must be doing something wrong.
Background
I use Canva to create a lot of small, individual assets (like marketing assets and web assets). I created a design and exported it as an SVG (as I've done countless times). The asset in question is a graphic to be used in a hero section and it has a transparent background. I've already been using it in my actual code project and it looks as expected (the background is transparent.
However, I've been trying to use Figma to design my site, and I imported the asset so I could design my hero section. It imported almost everything correctly except the final layer. It imported the base layer by creating a rectangle item with its fill property as the base layer converted to an image.
This has caused to issues:
It's now pixelated, which defeats the whole purpose of using an SVG, and
The background is no longer transparent. It's no black.
What am I doing wrong?
Context
Here are some screenshots to provide context. The first screenshot shows the SVG viewed in VS Code and the second viewed in the browser. These demonstrate that the original asset does in fact have a transparent background. The second two show how it looks in the Figma editor.
If the fill is not specific it might turn the object background into black color. Try to set the fill:none.
I've just started working with Adobe Illustrator and I stuck with a problem of exporting.
The names of my layers are renamed after exporting:
In Illustrator I have:
Export:
And file what I received:
So, how to manage that my output svg file will contain layer names which I added to Illustrator?
Thank you!
Answer is simple. I use combination the letters and numbers. In this case everything works fine.
Like:
1 = x1 etc.
If Illustrator would try to use your layer names as node IDs those wouldn't be unique and therefore not compliant with HTML standards.
It's not a straight-forward answer, but I usually solve this by grouping nodes to few groups in Illustrator, setting relevant names to those groups and then cleaning exported SVG manually in text editor.
I have icon in Sketch, but when I export it to SVG, it's somehow corrupted. I have no idea why and how to solve that. Can you help me?
Result:
Source: http://test.marekcernak.cz/leave.sketch
Redraw your leaf design to avoid paths that overlap themselves.
I don't use Sketch, but there have been similar questions relating to Sketch and issues it has regarding incompatible support for fill-rule (a.k.a. winding rule). For example see this this question.
If you fix the overlaps, I believe you should have much better results when you export to SVG.
It seems like you have style collision with other SVGs that you have exported to use in the same page. Make sure you use unique names for id and class attributes.
I'm kicking around an idea for a side project and am looking for advice on which direction to go in terms of technology. I've done some research already, but am still fairly confused as to what the realistic options are.
I'd like to make an interactive map based on a fictional world (think Middle Earth), including a timeline filter and a details section for additional information on an event or location.
Desired Features:
map on the left
details pane on the right
timeline slider/filter at bottom
Territories
color for political affiliation
displays details in details pane
labels
labels for cities
Hurdles:
Get a clean map image to work with
Map image into intermediate format (svg, geojson, topojson?)
Display map on webpage, style map, add animations, etc
Technologies
SVG
I'm pretty sure I could code all of this in SVG using events and boundaries. I've already been able to create SVG Paths from the image using GIMP, so converting the map into an SVG file seems plausible.
The issue with doing it this way is I would end up doing all the work the hard way when there seems to be lots of frameworks for this kind of thing already.
Kartograph
La Bella Italia is a very nice example and would serve as a good starting point. I love the trade route animations and the border styling with the glow filters.
The bonus here is that I know I can make an svg map, which is all this would need to get up and running.
My issue here is it doesn't seem like Kartograph is as rich of a platform as D3.js. I'm not sure if I can double dip and link some D3 stuff with the kartograph events. If I could, that might be the solution.
D3.js
The sliders, animations(hover and selection), and topojson seem like they would be perfect. But the main issue I have here is getting my image converted into a GeoJson format. From what I can tell these formats are strictly for Real World maps, using longitude/latitude.
So there you have it! I'm hoping there is some good news on how I might convert my map image into topojson so I can enjoy the benefits of D3.js. If not, I suppose I could just try kartograph and wire the events up with D3 controls.
Thoughts?
I'm currently writing my master thesis and I have the same topic like you had these days. I called my project Arda Maps. Feel free to ask me anything if have techonology questions.
I'm using the following frameworks/tools in my project:
QGIS
JQuery
D3.js
GeoJSON/TopoJSON
TimeGlider
I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel
I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import
The SVGs are displaying perfectly, however I want to animate them.
My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??
If you need any more info please say!
Thanks
EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.
The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.
Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.