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.
Related
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.
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 need to display both color coded states and cities on a US map.
Is this possible with Google geocharts?
http://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options
Basically what I'm looking for is a way to mix the regions and markers display modes.
If not, any alternate options to achieve this?
I also answered a similar question here, but here it goes again:
Regions and Markers wont work at the same time. So if you want to color the background of the states, using markers mode, you can do it with CSS.
I'm documenting some examples for a Wordpress plugin i developed here: http://cmoreira.net/interactive-world-maps-demo/advanced-customization/
Check the last example. It's not easy, since you have to find which child path number you want to color, and then you can do it. Example:
#visualization path:nth-child(5) {
fill:#cccccc;
}
Here's an example, forkerd from another user, with the CSS above: http://jsfiddle.net/cmoreira/Jqkjg/
Hope it helps!
No, this is impossible with GeoCharts. I would recommend you to try jVectorMap library for that.
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.
I am working on an application where I need to display color coded indicators. The standard colors will be red/amber/green, but I need to be able to pick any color (e.g. by hex value). The colors are updated dynamically by a script, based on data (dashboard style).
Are there libraries that could help me? I am thinking in particular about using svg or canvas graphics that the script could modify.
Note: the question has been rephrased to better explain the context.
I like this collection on WikiCommons. They are in SVG
http://commons.wikimedia.org/wiki/Tango_icons
Here are a couple of links to start with:
nounproject
openiconlibrary
openclipart
small iconset for use with raphaël