Develop Reference

Responsive map made of multiple image files

I'm pretty much a total noob when it comes to responsive web design and I'm attempting to produce a responsive web app with an interactive map.
The map is made up of seven separate image files - one for each region. The map has to be split in to separate images so that I can change the transparency of each image (and therefore, the regions color intensity) depending on data taken from the database.
I want the map to be centered but I also want each region's individual image (that makes up the map) to retain its position.
The best analogy I can think of is a jigsaw where the pieces maintain their correct position to complete the jigsaw's image even when the browser is resized.
What is the easiest way for this to be achieved?
Bare in mind that I still need to be able to control the transparency of each regions image.
Any help or suggestions would be greatly appreciated as I do not know where to start! Sorry if my description is poor - feel free to probe.
Cheers,
Will

I ended up using an SVG made in illustrator which worked perfectly. Embedded it inline as apposed to having an SVG file in the directory.

How do I get glyph outlines of a letter as bézier paths using JavaScript?

I want to retrieve the outline information of font glyphs as bézier paths in HTML5. This would allow me to randomize the outlines:
In Cocoa, I would use appendBezierPathWithGlyph:inFont:. In Java, I would use TextLayout.getOutline(). How does this work in JavaScript?
I discovered that Mozilla has mozPathText but I can't get it to work.

Out of necessity I've created my own library called opentype.js. It parses OpenType, TrueType, PostScript and WOFF fonts.
Here's how it parses a typeface:
Load the .ttf / .otf file using a XMLHttpRequest.
Parse the glyf and loca table to extract the letter shapes (glyphs).
Parse the cmap table which contains the mapping from characters to glyphs.
Parse the head and hmtx table to get the metrics, basically the spacing between each letter.
Then it can create a bézier path:
Convert the letters of the text into glyphs.
Convert the coordinates of the glyph to quadratic curves.
Adjust the spacing using kerning information.
This results in a path that you can draw using the HTML5 canvas:
var font = opentype.parseFont(arrayBuffer);
var path = font.getPath("Hello, World!", {x:0, y:150, fontSize:72});
path.draw(ctx);
The demo website has a live example.

Low-level parsing
In JavaScript you will have to manually parse the typeface file and extract the path data you need. AFAIK there is no helper-library for this at the moment so you are left to do this yourselves.
To parse a file you will also need to upload it manually and parse it as raw data using the new File API and possible typed arrays for binary font formats (ttf).
It's possible to write a very long answer for this as this is rather low-level stuff and to broad to be covered here (IMHO). However, here are the file format specifications for the common font files:
WOFF (recommended)
Embedded OpenType
Open type
Open Font
TrueType
Type 1 (PDF)
But there is another approach you can take as an intermediate step saving you a lot of pain:
Pre-parse
Select the typefaces you want to use. Run them through Java/Cocoa/.NET (WPF) or whatever you prefer and build arrays containing the information you need (for example, WPF gives you the path data for each glyph). Convert them to JavaScript arrays or JSON objects and use those for the render and manipulation. The resulting points will be in em values which are easy to scale.
Now you can simply go through the arrays and render the path segment type (line, bezier etc.) and modify the point positions.
mozPathText is for canvas and just holds the text path (currently Path API is not exposed in any browser, but will in the future - however, it cannot be used for this as the low-level path data per glyph isn't available for many reason, legal reasons possibly being one).
Trace
The third approach is to sort of "OCR" the glyphs on the canvas by tracing each individual glyph and try to build paths from it's traced outline.
This can be done in several way - one way is to parse line by line and group pixels based on distance/connectivity and then iterate through the group/region using neural networks or fill algorithms to find the outer boundaries for the glyph.
Or - you can draw the text as outlines and just trace the connected pixels for each shape and use that as a line path.
In this case you may run into challenges that may seem simple enough but can turn out to not be.
Example: the letter O consist of an outer path and an inner path. The inner path punches a "hole" in the outer path. You cannot define this behavior directly just by defining paths in canvas so you need to add "cuts" between the two paths after you have determined they belong to each other, and then join them at the cuts.
Using different composite modes may help in creating the illusion of such but you will still need to determine which path is the solid part and which will be drawn as the "hole".
Warp/distortion
A final approach is to not use glyph paths at all but just warp the bitmap using interpolation and warp grid (typically used in connection with 3D textures):
http://davis.wpi.edu/~matt/courses/morph/2d.htm
Warping (pdf)
Morphing (pdf)
Define your own fonts/paths (manual trace)
The more obvious option perhaps: define your own font paths from scratch. A bit more work in the area of either making a font designer or by manually tracing an image, or defining the paths manually. A "font-plotter" (using a trace image) is not so complicated but require patience.
You can use a canvas in the browser to record the lines you are plotting and use smoothing algorithms (cardinal spline + knee detection) to get nice round curves and sharp corners.
It all depends on what result you want in the end and how much work you are willing to put down. There is unfortunately no free ticket in this regard as the internal data isn't exposed (and probably won't be in the future either).

With SVG it's possible in some browsers to do the reverse of what you're asking: specify custom font glyphs as bezier paths, and then lay out text using them. You could possibly import an SVG font and then perform your transformations on that. But even though SVG is now widely supported, SVG fonts are not. Only Safari, Chrome, and Opera currently have support for them.
If you want to do these types of transformations with system fonts in a vector way, that's not possible in any browser that I know of. There's simply no API in HTML or SVG to get the outline path of an installed glyph. (Maybe there's something you can use in a plugin like Flash, I haven't checked out their text API for a while.)
If you're okay doing it the raster way, you can use a hidden canvas element to lay out your text in an off screen buffer and then get a pixel map of the result. You can then perform pixel-based transformations on it and draw that into a second, visible canvas element.

Converting stroked path to shape with javascript

Is there a way to convert a stroked path to a shape using javascript? Do any libraries offer this as a build in feature?
I know Illustrator has this function, so a possible solution would be to copy the SVG image on the screen and move it to Illustrator, but if you could do that, would you lose all the associated meta-data stored as attributes?

[I]s there a way to convert a stroked path to a shape using JavaScript?
Yes, there's a way to convert an SVG path stroke into an outlined shape. Unfortunately, it is not a prepackaged function built into SVG. The way to do it is called Math. You'd need to account for bézier curves, miter settings, linecaps, linejoins, and dasharrays. As #inhan noted you might use various functions to help you or to approximate it, but none of them are going to do the math for you. It is possible, but it is not by any means easy…in JavaScript.
[W]ould there be a way to copy the svg image on the screen and move it to Illustrator?
Sure, that's easy.
Open your D3.js SVG-based illustration in a web browser.
Open the Developer Tools (or Firebug).
Find the element you want, right-click and choose "Copy as HTML" or "Copy SVG".
Paste the code into a text editor and wrap it with SVG.
Open the SVG in Illustrator.
Outline the path(s) you want.
Save as SVG
Copy/paste the SVG code Illustrator exported into…wherever you want.
But what does this gain you? Certainly nothing that works with your D3.js visualization.
But if you could do that, would you lose all the associated meta-data stored as attributes?
What are you talking about? If you are talking about attributes in the source code, then you only lose it if you don't copy/paste the attributes onto the result. If you are talking about JavaScript data bound to a visualization running in the web browser, of course you are going to lose the data if you round trip through Adobe Illustrator.
Your questions make so little sense to me that I have a feeling that I must be missing what your needs/goals are. What are you really trying to accomplish?

Using Element.getTotalLength() and Element.getSubpath() functions in Raphaël along with stoke-width and stroke-dasharray attributes of that path in a function would probably give the result.

clip-path in Raphaël.js

How can I use clip-path with Raphaël.js like this example. It seams that Raphael.js has only clip-rect in it.

You can cut a hole through a path drawn shape.
This is a technique known as donut holes and you can see an example on my index page
If this looks difficult it is not
See the information database and the technique labelled donut holes
My site index is
http://www.irunmywebsite.com/
Err it used to be.
Now you can find a multiple clip path (Imagine seeing a view through several holes}
The carousel and the thumbnail holder are just one path...
See the Raphael Crousel
A much better example I include below. The central blue region has several holes cut into it. This has multi purpose usage.
It is part of what I call a DOM / SVG hybrid solution.
Cut multi purpose holes for a variety of reasons

I don't think you can do it via Raphael. You can do it by manipulating the DOM directly, but you will loose the ability to call Raphael methods for that element.
I find Raphael a bit obsolete, now that IE supports SVG. You can do much more with plain javascript and and the SVG specification.

If, like in the example image, it's a raster image (png, gif, jpg... bitmap pixel images) you are trying to clip, it's actually really easy. In Raphael 2, you just set the fill to point at the image file. It uses it as a background image.
If you want to crop an image or photograph with a Raphael path or shape like a clipping mask or clip-path for image files, just set the image as the path's fill.
somepath.attr({fill: 'someimage.png'});
Limitations (AFAIK):
Only one image per path
Only one path per image (use compound paths for complex masks)
Things like background position aren't easy - see this question for more
I think it's impossible to stop the image repeating

Combine Vector advantages with Bitmap in an HTML canvas element - how?

What I am trying to do is create a game that has an extreme amount of zoom-ability on a canvas element. I would like to make use of the advantage that vector graphics have insofar as being able to be programmatically created at runtime, with the high performance of bitmap images.
What I would like to do is programmatically create the first-frame image of a game "sprite"... this would be a vector image. After the first frame though, I do not want to keep wasting CPU cycles on drawing the image though.. i would like to cache it as a bitmap/high performance image for that zoom level.
Following this, if the user zooms in by >20%, I then redraw the image with a higher level of detail vector image. As above, this vector image would then be cached and optimized.
As you can see here, this would be a pretty basic space ship.. I would first render it programmatically as a vector and then.. raster it I guess? Goal is to avoid wasting CPU.
If the user zooms in...
A new vector image of the same shape would be drawn, albeit with a much higher level of detail. This is basically a Level Of Detail system. In this case as well, after the initial programmatic draw, I would "raster" the image for maximum performance.
Does anyone have ideas on what tools I would need to make this a reality inside of a HTML canvas? (The rest of the game will be running inside of the canvas element..)
Thank you very much for your thoughts.
**Edit: I wanted to add... perhaps the route of rendering an image via SVG (programmatically), then pushing that png file into the canvas using drawimage(), might provide some success? Something similar? Hmm...

Check out that article , but it seems there is no standard method to do what you want and it may fail in IE.
http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas
You should perhaps go with an all SVG game , or provide a maximum zooming rate to your game and use big images as sprite assets. it would not have been a problem using flash,but i guess you wont go with flash anyway.
Maybe there is a framework that can translate SVG into a "canvas drawing sequence" but i would not bet on high performances in that case.

I managed to answer my own question.
The way to do this is to first create an SVG file, and then convert it to a PNG file on the client using "canvg". The PNG can be created at different levels of details based on what you want, and in this way you could create a dynamic LOD system.
Flash does something similar automatically by cashing a bitmap image of the SVG file... it's called "pre-rendering". If the SVG isn't scaled or the alpha isn't changed, flash will just use the bitmap instead (much faster then continuously re-rendering the SVG file, in complex cases). Size (and thus detail) of the PNG output can be modified however you like, and so pre-rendering could be done based on events as well.
From this information, I have decided to implement the LOD system such that SVG is used whilst the user is actively zooming (scaling the target "sprite"), and then as the zoom slows down, compute a PNG pre-render. Also, at extremely high levels of zoom, I simply use the SVG, as it is much easier for the CPU to compute SVG's at high resolution, then bitmap images that cover most of the screen. (just take a look at some of the HTML5 icon tests that put lots of icons on the screen... the bigger the icons are, the slower it runs).
Thanks very much to everyone's comments here and I hope that my question/answer has helped someone.