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.
Related
As shown in the above picture, the default (and logic) behavior of SVG rasterizers will let the background appear in between two edge-to-edge placed antialiased patterns. Is there a way to tell the rasterizer to somehow merge the patterns together so to avoid this artifact?
Let's be clear. I have no intention whatsoever to create a new rasterizer for this. I am just asking wether SVG implements such an option or not.
Many thanks ;)
There are many options to solve this. The easiest is to specify "shape-rendering=crispEdges" which will remove anti-aliasing.
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
is it possible to create a stroke with a dynamic width with SVG? I want to achieve a Calligraphy look like here, here or here.
Is this even possible? It seems customization of strokes in SVG is fairly limited. Even gradients in strokes seem to be non-trivial (see here).
There is a proposal to add into SVG standard a mechanism, that does exactly what you want:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html
There's even an example implementation available here:
https://rawgit.com/birtles/curvy/master/index.html
It is, however, by no means official and we cannot be even sure it'll ever be.
Until then you'll need to stick to Bezier curves and object filling:
You can also use calligraphic fonts, for example - Tangerine available on Google CDN:
This approach requires less work since you don't need to draw everything from scratch, but then again, using third party fonts leaves you with little control over the final result.
You can't dynamically adjust the stroke of a path element. However you could draw a path, use a fill color on it instead of stroke, then double back upon the letters at a slight distance away from the original line.
Also, if you are using the SVG on the web then you can use css fonts on text elements. There are some pretty good cursive fonts that you can use for free... just check google web fonts.
I'm trying to make 3 different circles to my website. I don't want to insert it as a graphic/image file. So I've been trying to achieve it using CSS3, but I can't really work my fingers around it.
What will it look like?
I have uploaded a picture of what I'm trying to achieve at: www.sp34k.com/etc/circles.jpg
I can't really show the code I've been trying to use to achieve this, as it all looks totally weird and nothing floats currectly.
What I've tried
What I've tried is to make 3 circles with position absolute and then use % (percentage) to determine the width of the colored parts, but I can't twist my mind around how it should be set up.
Any suggestions is appreciated,
Mike
Here is a simple try of me to achieve the effect you want:
DEMO
edit: css-only solution
It can be easily animated with javascript or keyframes. Arbitrary content would go into the inner div. To change the percentage, simply adjust the angle of the pseudo-elements.
With a little more effort this could be easily refined I guess;)
Note: the transform has the webkit-prefix, so it works only in chrome/safari - to see it in firefox or other browsers, you need to change the prefix.
P.S. I will animate it when I'm home from work.
Good one by Christoph but he is using SASS/SCSS which are comparatively slow then normal CSS because they have to be converted to CSS before browser render it so I have have a different Solution for you
try this fiddle
Where can I get some code to implement rendering of SVG (specifically SVG Markers) in C#?
I have been using SharpVectorsReloaded. But the code to render SVG Markers is incomplete and buggy. I have been trying to debug and work through the issues but I would love another code source (C# or Java) so that I can get some ideas into what is wrong/missing from the SharpVectorsReloaded implementation. Would you also be able to specifically point to where in the code the SVG Marker rendering is taking place?
Maybe Batik's or Webkit's source code can help you? I know Batik is one of the most complete SVG implementations and Webkit is not bad either. The source of the Canvg library can also help..
Take a look to this open source https://github.com/vvvv/SVG, it has the definitions you're looking for.