Is there a way to convert lat/lon coordinates to an SVG path or canvas tag path? I want to display state outlines in SVG on a map on the web. Thank you.
D3.js offers a variety of nice map related functions along these lines.
See for example http://mbostock.github.com/d3/talk/20111116/airports.html
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
Is it possible to do the chart or visualization as SVG in Inkscape and then let d3.js update it with correct data dynamically? Like drawing bars and changing digits according to some JSON.
I am not yet started with d3.js, and I am afraid that it can only produce SVG itself and won't be able to handle complex drawings.
Here is tutorial for using Inkscape with d3.js - http://christopheviau.com/d3_tutorial/d3_inkscape/
I am looking for a tool to draw the SVG diagram and I want to display the same in a webpage.
There are lot of tools to create SVG diagram, but I am looking for the one to add some extra fields to each shape.
OK first I will explain my requirement clear. When we create a rectangle using any SVG tool, it will create a SVG element with rect element, in my case I would like to differentiate two devices "device type-1" and "device type-2" (using CSS in my web application) but their shape is rectangle.
So, I have to add some additional information for each rectangle in the drawing tool, so that using Javascript I could understand the type of device, based on the device type I could apply different CSS for each rectangle.
How to do this? Any drawing tools support this kind of feature?
You could use http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html and define IDs that you reference later on in JavaScript
One approach would be to us Adobe Illustrator to design you elements and Raphael JS to display and animate said elements. There are some differences in the way illustrator draws vector graphics and the way SVG does so the general consensus is to keep you graphics relatively simple. There are several guides out there, but this one looks particuallry good:
http://snugug.com/musings/illustrator-raphael-js-guide
Can I rotate in a 3dish way a group tag in an SVG file?
Is there any need for an external JS library? I'd be glad to get a link somewhere.
Apparently 3d support isn't here yet so you have to make it look like there is three dimensions.
Have a look at the following links, they explain in detail how to use SVG to give a 3d effect.
rotating cube - wireframe (looks like 3d with controls to move it)
3d animation - advanced animation in 3d
I have an application that needs to apply some transformations to text (including non-affine transformations). Does anyone know of a toolkit (or group of tools) that would let me bring in a True Type or Postscript Font, get the glyphs as outlines, then apply transformations to the outlines and render it as a bitmap or svg file ? Flash won't do non-affine transformations so it is out. Illustrator has a function which converts text to outlines, but Illustrator scripting is very unstable so I can't really use it for this. Thanks for any help.
You could use the Batik TTF to SVG Font converter. The SVG font format uses the same path data format that the SVG <path> element uses.
For example, this is the output from converting Gentium Basic Regular using the above tool. With the right coordinate system, you can just grab out the path data, transform it however you like, and then draw it with a <path>. Note though that the glyph coordinate system in SVG fonts is actually inverted, with the (0,0) at the bottom left corner of the glyph cell box, compared to the regular SVG canvas which has (0,0) at the top left corner. So don't forget to flip the glyph, e.g. by putting transform="scale(1,-1)" on the <path> you use to render the glyph.
Once you have the SVG document that renders the glyphs as shapes you can convert it to a bitmap using your favourite tool. (Batik can do that too.)
While Batik is a good answer, it will convert only TrueType fonts to SVG Fonts. If you have OpenType fonts, and they more and more dominate now, you can use FontForge to get an SVG Font for these. Another advantage of using OpenType is that the produced SVG uses not only quadratic but also cubic Beziers in the path which is more effective.