svg output

[boulabiar]

Thanks for building this great library! I want to ask whether there are way to have svg output of the milestones ? I tried using https://htmlsvg.netlify.app/ to convert the html element into svg, but the output is broken.

[walterra]

Oh, interesting use case!

It will not work with the raw HTML because it might miss the relevant CSS stylings because they are referenced via classes only. I used the following workflow to get a bit further:

• Take the CSS contents of https://unpkg.com/d3-milestones@1.1.0/build/d3-milestones.css
• Wrap that and the rendered HTML into a most basic HTML doc like this:

Click to view HTML with class based CSS

```html

0789
Vikings begin attacks on England.

Vikings found Dublin in Ireland.
0840

0860
Rus Vikings attack Constantinople.

Danish Vikings establish a kingdom in York, England.
0866

0871
Danish advance is halted in England.

Harald I gains control of Norway.
0872

0900
The Vikings raid along the Mediterranean coast.

The Viking chief Rollo founds Normandy in France.
0911

0941
Rus Vikings attack Constantinople.

Viking leader Erik the Red discovers Greenland.
0981

```

• Next I used CSS Inliner Tool to transform the HTML above from CSS classes to inline styles.

Click to view HTML converted to inline CSS

```html

0789
Vikings begin attacks on England.

Vikings found Dublin in Ireland.
0840

0860
Rus Vikings attack Constantinople.

Danish Vikings establish a kingdom in York, England.
0866

0871
Danish advance is halted in England.

Harald I gains control of Norway.
0872

0900
The Vikings raid along the Mediterranean coast.

The Viking chief Rollo founds Normandy in France.
0911

0941
Rus Vikings attack Constantinople.

Viking leader Erik the Red discovers Greenland.
0981

````

The generated HTML I used with the tool you posted and got this:

Not perfect yet but I hope you get the idea so you can iterate on the approach. Let me know how it works out for you.

[boulabiar]

Thanks for your quick answer!

I want to generate svg because then it's very easy to zoom into a part of it or even animate that motion. I want to do it programmatically in an automated manner.

I still wasn't able to get a self contained svg output, because the file is rendered ok only on the page, but once loaded into an svg editor like inkscape, everything goes back broken. I think everything has to do with css styling while svg prefers to have simple objects so that it can be portable.

[walterra]

An alternative approach could be to render the HTML as a PDF and convert that to SVG.

Did the following on macOS:

• print rendered HTML example directly from the browser as a PDF
• open the PDF in Inkscape
• save as "plain SVG"

This is the actual SVG:

Gist: https://gist.github.com/walterra/876b9b5b7537111c47719e7a5cd1a610#file-viking-timeline-svg

It's not picking up all text styles correctly but it gets pretty close.

[walterra]

Closing, feel free to reopen should you have more questions.