How do I merge an SVG image with chunks of HTML to make one nice big node diagram?
May 13, 2011 9:58 AM Subscribe
How do I merge an SVG image with chunks of HTML to make one nice big node diagram?
I have an SVG file that is an image of a node diagram, where the nodes are represented as small squares. I also have a different representation of the same nodes in an existing web page, which is basically just an HTML page composed of a grid of larger squares. The large squares each contain a small jpg, a minimal amount of text, and a link. I would like to somehow combine these two representations of the same data, so that the large squares are arranged and connected visually in the same way as the small squares on the node diagram.
The only way I have thought of to do this is to scale up the SVG until the small squares on the node diagram are the same size as the large squares on my web page, and then somehow superimpose them at the appropriate coordinates. I'm not really sure how this superimposition would take place. I am also not sure if this is a ridiculous idea, or a brilliant one --- my team and I are not experienced web developers, and we are all basically unfamiliar with SVG and CSS. However, we are pretty good researchers, and if we had some high-level ideas for how to accomplish this, I think we might be able to get there.
How would you attack this problem?
I have an SVG file that is an image of a node diagram, where the nodes are represented as small squares. I also have a different representation of the same nodes in an existing web page, which is basically just an HTML page composed of a grid of larger squares. The large squares each contain a small jpg, a minimal amount of text, and a link. I would like to somehow combine these two representations of the same data, so that the large squares are arranged and connected visually in the same way as the small squares on the node diagram.
The only way I have thought of to do this is to scale up the SVG until the small squares on the node diagram are the same size as the large squares on my web page, and then somehow superimpose them at the appropriate coordinates. I'm not really sure how this superimposition would take place. I am also not sure if this is a ridiculous idea, or a brilliant one --- my team and I are not experienced web developers, and we are all basically unfamiliar with SVG and CSS. However, we are pretty good researchers, and if we had some high-level ideas for how to accomplish this, I think we might be able to get there.
How would you attack this problem?
Response by poster: Duh, pictures would probably help. My SVG node diagram kind of looks like this, except mine has squares for the nodes instead of circles. And the HTML page I'm trying to merge with it kind of looks like this, except obviously it's a web page and not a single image, and the squares have links on them in addition to a picture and some text.
posted by slenderloris at 10:31 AM on May 13, 2011
posted by slenderloris at 10:31 AM on May 13, 2011
Best answer: So yeah, I'd take your existing SVG and modify it so that the squares in the SVG have embedded within them the HTML from your page.
As a one-off you can do this with an SVG editing tool. (Or a text editor, if you're patient). Here's an example using foreignObject, there may be simpler ways. If you were doing this in general I'd write Javascript code to do the compositing using the D3 library.
posted by Nelson at 10:55 AM on May 13, 2011
As a one-off you can do this with an SVG editing tool. (Or a text editor, if you're patient). Here's an example using foreignObject, there may be simpler ways. If you were doing this in general I'd write Javascript code to do the compositing using the D3 library.
posted by Nelson at 10:55 AM on May 13, 2011
obviously if you have the data you could remake the html figures in svg.
you can composite layers in CSS as you suggest, and once you get the coordinate systems worked out, it may work fine for your purposes.
you might consider parsing the html/css to obtain coordinates for the images, and place the images in svg. that would be easy, if the html/css is not too hairy.
you can also embed html in svg, but i have not tried this. it may be one easy step to composite the html in svg.
never seen D3 before, but wow does it produce some fantastic results!
posted by paradroid at 10:59 AM on May 13, 2011
you can composite layers in CSS as you suggest, and once you get the coordinate systems worked out, it may work fine for your purposes.
you might consider parsing the html/css to obtain coordinates for the images, and place the images in svg. that would be easy, if the html/css is not too hairy.
you can also embed html in svg, but i have not tried this. it may be one easy step to composite the html in svg.
never seen D3 before, but wow does it produce some fantastic results!
posted by paradroid at 10:59 AM on May 13, 2011
I would second using a Javascript library. I'm only familiar with jQuery and Raphael, but D3 looks pretty neat too.
posted by yaymukund at 1:17 PM on May 13, 2011
posted by yaymukund at 1:17 PM on May 13, 2011
Response by poster: Well, we ended up using foreignObject and the team members with the computer science degrees figured out the mathy bits. It works a treat in Firefox, but we made the terrible assumption that IE9 would be supporting foreignObject along with all the rest of the SVG spec (silly us!), burn. Enter horrible hacky crap telling IE users to switch to FF/Chrome or just view a non-diagrammy flat list. Ugh. But at least we got it working, I guess.
posted by slenderloris at 4:47 PM on August 16, 2011
posted by slenderloris at 4:47 PM on August 16, 2011
This thread is closed to new comments.
posted by Nelson at 10:14 AM on May 13, 2011