måndag 11 april 2016

Making Inkscape-generated SVGs Visible in All Browsers (i.e., Internet Explorer...)

One of my many long-term, rarely worked on projects is the "Fotogenealogi" ("Photo-Genealogy") project, where me an my wife borrows old photos of our ancestors from relatives to let them be professionally scanned and sometimes a bit retouched if the original has a lot of wear and tear. By now, we have quite the collection, sometimes going back four generations to the second half of the Nineteenth century.

Recently, we processed a photo of the guests at my grandmother's brothers weeding (in which my father is a fresh teenager) and as most of the people was unknown to me, I had my father identify them for me. When trying to write a clear-to-follow caption, I realized that I needed a glossy-magazine-like silhouette version of the images, with numbered outlines of all the persons, to make the caption a breeze to write.

Thus, I loaded the high-res scanned original into Gimp, added a front layer with transparent background, painstakingly filled in the contours of each person with a broad brush (I first did it with a 1-pixel thin line, but that led to too many holes that created problems in the next step), saved just that layer as a png, ran Autotrace to vectorize the outlines into an esp, imported the esp into Inkscape to fiddle with the stroke width of the outlines, adding numbers to their heads, and differentiating the various nuclear families in the picture with different pastel fill-colours. As Inkscape nativly saves images as svg:s we're home free, since all browsers support them, right?

Wrong! It displayed just fine in Google Chrome and Firefox but in Internet Explorer, with a height-directive to the img-tag, they didn't display at all... Despair! However, after some searching, I found Triangular's illuminating blog entry https://triangle717.wordpress.com/2014/06/07/ie-inkscape-svg/ which provided me a way forward.

It's not enough to save the image as an default Inkscape svg but one need to save it as an Optimized SVG and click in "Enable Viewporting". Then it works as it should in Internet Explorer with img-tag re-scaling and all. Number 22 is my teenage father.

Inga kommentarer:

Skicka en kommentar