Customize SVG icons in Tilemill/Mapbox - svg

I added a data layer on my map and I'm using an svg image to represent the markers.
#points {
point-file: url(marker2.svg);
marker-width:10;
marker-fill:#fff;
}
since it's an SVG image, I'm trying to customize the fill color but it is not working. marker-fill seems to only work on the markers they provide, but not on SVG images. Is this possible to do using TileMill/Mapbox ? Is it possible with the JS API ?
UPDATE
From http://mapbox.com/blog/announcing-tilemill-0.10.0/, it looks like using marker-fill should have done the trick but that's not the case. Could the problem be with my svg image ?

Solved it, looks like if you're looking to customize the marker, you need
marker-file: url(marker2.svg); instead of point-file: url(marker2.svg);

Related

How to draw custom shapes with draw2d?

I am using draw2d javascript library for drawing predefined shapes and custom shapes in it's canvas.
As I don't have any example made yet, I am trying to copy from it's documentation but doesn't seem to find a good way to research it as it contains a whole lot of it.
Here is the circle example.
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.shape.basic.Circle
and here are some more documentation with examples.
http://www.draw2d.org/draw2d_touch/jsdoc_6/
I have premade shapes with html and css and I am trying to drag and drop and render them on canvas like these in this image. Also when dropped, they should have input and output ports too.
Is it possible to convert this html/css to draw2d shapes?
So here this is made possible via extending draw2d's SVGFigure and thus we have ability to provide custom svg to render it as a custom shape.
Below links were useful in this context.
http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.SetFigure
https://github.com/freegroup/draw2d/tree/master/examples/shape_labeld
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown

fabricJS - SVG parameters with toSVG

According to this link, it is possible to modify a SVG, depending on the parameters included in the URL used to access this SVG.
Is it possible to do so using the toSVG() method ?
Let's say I create a basic canvas with a few elements. Once I'm done, I export and save the result of my canvas.toSVG() on AWS.
I get this image
Is it possible to modify the way toSVG() behaves, so that adding ?color=red at the end of the URL would make my tshirt red ?
I tried using the example from the documentation, using replace() on my canvas objects, but this generates empty SVGs.

Can html2canvas render svg in a page?

I am using html2canvas to create a 'screenshot' of a HTML page that contains SVG.
Everything looks good, except the element.
I know that it should be possible to render SVG in Canvas; PhantomJS, fabric.js and CanVG do it.
Is this something that html2canvas does not support? Or am I doing something wrong, and this should just work?
If this has not been implemented, what is the best way to extend html2canvas (using canvg)?
Capturing SVG images works by transforming them into canvas, using canvg. Include both javascript files as indicated on that page. Then the easiest way to do this is:
<body onload="canvg()">
See the parameterless call example.
When all SVG images have been converted, html2canvas works flawlessly.
Of course, all SVG images will be converted to canvases, but I did not see a difference.

wkhtmltopdf failure when embed an SVG

Has anyone in this vast space has ever had the luck to successfully create a PDF with an embedded SVG on an HTML? I've been receiving segmentation fault all the time.
Or perhaps is there any other way to embed an SVG into an HTML file and then export it to PDF instead of wkhtmltopdf?
I had similar problem. Seems like javascript embedded in SVG image can cause segmentation fault.
I was generating SVG graphs using pygal Python module. To successfully generate PDF from HTML with SVG graphs I had to do several things:
Remove reference to javascript. (In case of pygal add js=() key to a graph constructor).
Specify image size in svg tag, like
<svg ... width="300" height="200">
(In case of pygal use explicit_size keywoard)
Embed SVG image into img tag in base64 encoded form, like
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...">
I was using 11th version of wkhtmltopdf.
If this fix doesn't work for others, here's what worked for me with chartist.js, and wkhtmltopdf 0.12.2.1 under Ubuntu 64. (Credit to Panokev)
Add this to your javascript before all other JS.
{
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
Definitively set width style for chart div, for example - style="width:950px;"
Right .. I managed to pull it off finally ... all needed was a bit of treatment on the original eps file. I opened the file with illustrator and chose to "flatten transparency" .. maybe what it does was to flatten the many layers of the file or something .. then save as svg .. and it rendered nicely in the PDF ..
Hopefully this helps if anyone out there would have the same issue as I did. Thank you! :D
We fixed this problem by adding a width and height attribute to the svg besides the viewbox attribute.

Cytoscape equivalent of graphviz URL/href node attribute when exporting SVG?

In the past I've using graphviz's node "label", "URL" (or "href") and "tooltip" attributes to generate SVG graphics where the nodes have the text label, mouse-over displays the tooltip, and clicking the node (assuming your browser is displaying the svg) takes you to the URL target (and all those strings can be different).
Right now I'm trying to generate the same sort of thing in Cytoscape. Exporting svg works nicely, but linkage of nodes to external URLs seems all tied up with Cytoscape's "linkout" feature; while this seems very powerful while you're actually using Cytoscape, it's not clear to me whether there's some way of getting it to produce clickable nodes or labels (I'd settle for either) in an exported SVG. The URLs I want to link to are a node attribute of my imported graph.
Is there something I'm missing in Cytoscape which will create links in exported SVG ? Any suggestions for alternative approaches ? e.g some way of getting labels to be arbitrary HTML including <a href=...>...</a> ?
My "plan B" is to postprocess the exported SVG, but it'd be nicer to have Cytoscape do it all.
So far as my further use of the tool permitted me to determine, Cytoscape just doesn't have this capability.

Resources