svg output
boulabiar opened this issue · 4 comments
boulabiar commented
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 commented
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>
<head>
<style>
.milestones__category_label {
display: inline-block;
text-align: right;
font-size: 14px;
margin-top: -4px;
}
.milestones__horizontal_line {
position: absolute;
background-color: #000;
height: 3px;
margin-top: 4px;
margin-left: 5.5px;
border-radius: 1.5px;
}
.milestones__vertical_line {
position: absolute;
background-color: #000;
width: 3px;
margin-left: 4px;
margin-bottom: 5.5px;
border-radius: 1.5px;
}
.milestones__group {
position: absolute;
font-family: sans-serif;
font-size: 10px;
}
.milestones__group__bullet {
background-color: #fff;
border: 3px solid #333;
border-radius: 50%;
width: 0px;
height: 0px;
padding: 2.5px;
}
.milestones__group__label-horizontal,
.milestones__group__label-vertical {
position: absolute;
padding: 0;
color: #666;
}
.milestones__group__label-horizontal {
border-left: 1px solid #000;
margin-left: 5px;
}
.milestones__group__label-horizontal div {
position: relative;
margin-left: 3px;
display: inline-block;
}
.milestones__group__label-vertical {
padding-left: 10px;
padding-bottom: 0px;
border-bottom: 1px solid #000;
margin-bottom: -5.5px;
margin-left: 10px;
bottom: 100%;
overflow: visible;
}
.milestones__group__label-vertical .wrapper {
min-width: 100px;
max-width: 300px;
border-left: 1px solid black;
border-bottom: 1px solid white;
margin-bottom: -1px;
padding-left: 5px;
}
.milestones__group__label-above-horizontal {
bottom: 100%;
}
.milestones__group__label-above-vertical {
padding-left: 0px;
padding-right: 10px;
right: 100%;
text-align: right;
}
.milestones__group__label-above-vertical .wrapper {
border-left: 0;
border-right: 1px solid black;
padding-left: 0px;
padding-right: 5px;
}
.milestones__group__label-last {
right: 100%;
border-left: 0;
border-right: 1px solid #000;
margin-left: 0;
margin-right: -6px;
text-align: right;
}
.milestones__group__label-last div {
margin-left: 0px;
margin-right: 3px;
}
.milestones__group__label__text-vertical {
display: table-cell;
vertical-align: bottom;
}
.milestones__group__label__text__title {
color: #000;
font-weight: bold;
font-size: 11px;
white-space: nowrap;
}
.milestones__group__label__text__event {
cursor: pointer;
}
.milestones__group__label__text__event--hover {
background: #efefef;
color: #313131;
}
</style>
</head>
<body>
<div class="milestones" style="margin-top: 105px; height: 105px;"><div class="milestones__horizontal_line" style="width: 879px;"></div><div class="milestones__group" style="margin-left: 0px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 180px; padding-top: 0px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones__group__label__text__title">0789</span><br><span class="milestones-label milestones-text-label">Vikings begin attacks on England.</span></div></div></div></div><div class="milestones__group" style="margin-left: 233px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 114px; padding-top: 0px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones-label milestones-text-label">Vikings found Dublin in Ireland.</span><br><span class="milestones__group__label__text__title">0840</span></div></div></div></div><div class="milestones__group" style="margin-left: 325px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal milestones__group__label-last"><div class="milestones__group__label__text-horizontal" style="width: 183px; padding-top: 34px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones__group__label__text__title">0860</span><br><span class="milestones-label milestones-text-label">Rus Vikings attack Constantinople.</span></div></div></div></div><div class="milestones__group" style="margin-left: 353px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 183px; padding-top: 0px; padding-bottom: 34px;"><div class="wrapper"><span class="milestones-label milestones-text-label">Danish Vikings establish a kingdom in York, England.</span><br><span class="milestones__group__label__text__title">0866</span></div></div></div></div><div class="milestones__group" style="margin-left: 375px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 127px; padding-top: 0px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones__group__label__text__title">0871</span><br><span class="milestones-label milestones-text-label">Danish advance is halted in England.</span></div></div></div></div><div class="milestones__group" style="margin-left: 380px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 173px; padding-top: 0px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones-label milestones-text-label">Harald I gains control of Norway.</span><br><span class="milestones__group__label__text__title">0872</span></div></div></div></div><div class="milestones__group" style="margin-left: 508px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 180px; padding-top: 0px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones__group__label__text__title">0900</span><br><span class="milestones-label milestones-text-label">The Vikings raid along the Mediterranean coast.</span></div></div></div></div><div class="milestones__group" style="margin-left: 559px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 154px; padding-top: 0px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones-label milestones-text-label">The Viking chief Rollo founds Normandy in France.</span><br><span class="milestones__group__label__text__title">0911</span></div></div></div></div><div class="milestones__group" style="margin-left: 696px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal"><div class="milestones__group__label__text-horizontal" style="width: 177px; padding-top: 0px; padding-bottom: 0px;"><div class="wrapper"><span class="milestones__group__label__text__title">0941</span><br><span class="milestones-label milestones-text-label">Rus Vikings attack Constantinople.</span></div></div></div></div><div class="milestones__group" style="margin-left: 879px;"><div class="milestones__group__bullet"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal milestones__group__label-last"><div class="milestones__group__label__text-horizontal" style="width: 183px; padding-top: 0px; padding-bottom: 49px;"><div class="wrapper"><span class="milestones-label milestones-text-label">Viking leader Erik the Red discovers Greenland.</span><br><span class="milestones__group__label__text__title">0981</span></div></div></div></div></div>
</body>
</html>- 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
<head></head><body><div class="milestones" style="margin-top: 105px; height: 105px;"><div class="milestones__horizontal_line" style="width: 879px;position: absolute;background-color: #000;height: 3px;margin-top: 4px;margin-left: 5.5px;border-radius: 1.5px;"></div><div class="milestones__group" style="margin-left: 0px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;"><div class="milestones__group__label__text-horizontal" style="width: 180px;padding-top: 0px;padding-bottom: 0px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0789</span><br><span class="milestones-label milestones-text-label">Vikings begin attacks on England.</span></div></div></div></div><div class="milestones__group" style="margin-left: 233px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;bottom: 100%;"><div class="milestones__group__label__text-horizontal" style="width: 114px;padding-top: 0px;padding-bottom: 0px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones-label milestones-text-label">Vikings found Dublin in Ireland.</span><br><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0840</span></div></div></div></div><div class="milestones__group" style="margin-left: 325px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal milestones__group__label-last" style="position: absolute;padding: 0;color: #666;border-left: 0;margin-left: 0;right: 100%;border-right: 1px solid #000;margin-right: -6px;text-align: right;"><div class="milestones__group__label__text-horizontal" style="width: 183px;padding-top: 34px;padding-bottom: 0px;position: relative;margin-left: 0px;display: inline-block;margin-right: 3px;"><div class="wrapper" style="position: relative;margin-left: 0px;display: inline-block;margin-right: 3px;"><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0860</span><br><span class="milestones-label milestones-text-label">Rus Vikings attack Constantinople.</span></div></div></div></div><div class="milestones__group" style="margin-left: 353px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;bottom: 100%;"><div class="milestones__group__label__text-horizontal" style="width: 183px;padding-top: 0px;padding-bottom: 34px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones-label milestones-text-label">Danish Vikings establish a kingdom in York, England.</span><br><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0866</span></div></div></div></div><div class="milestones__group" style="margin-left: 375px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;"><div class="milestones__group__label__text-horizontal" style="width: 127px;padding-top: 0px;padding-bottom: 0px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0871</span><br><span class="milestones-label milestones-text-label">Danish advance is halted in England.</span></div></div></div></div><div class="milestones__group" style="margin-left: 380px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;bottom: 100%;"><div class="milestones__group__label__text-horizontal" style="width: 173px;padding-top: 0px;padding-bottom: 0px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones-label milestones-text-label">Harald I gains control of Norway.</span><br><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0872</span></div></div></div></div><div class="milestones__group" style="margin-left: 508px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;"><div class="milestones__group__label__text-horizontal" style="width: 180px;padding-top: 0px;padding-bottom: 0px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0900</span><br><span class="milestones-label milestones-text-label">The Vikings raid along the Mediterranean coast.</span></div></div></div></div><div class="milestones__group" style="margin-left: 559px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;bottom: 100%;"><div class="milestones__group__label__text-horizontal" style="width: 154px;padding-top: 0px;padding-bottom: 0px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones-label milestones-text-label">The Viking chief Rollo founds Normandy in France.</span><br><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0911</span></div></div></div></div><div class="milestones__group" style="margin-left: 696px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal" style="position: absolute;padding: 0;color: #666;border-left: 1px solid #000;margin-left: 5px;"><div class="milestones__group__label__text-horizontal" style="width: 177px;padding-top: 0px;padding-bottom: 0px;position: relative;margin-left: 3px;display: inline-block;"><div class="wrapper" style="position: relative;margin-left: 3px;display: inline-block;"><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0941</span><br><span class="milestones-label milestones-text-label">Rus Vikings attack Constantinople.</span></div></div></div></div><div class="milestones__group" style="margin-left: 879px;position: absolute;font-family: sans-serif;font-size: 10px;"><div class="milestones__group__bullet" style="background-color: #fff;border: 3px solid #333;border-radius: 50%;width: 0px;height: 0px;padding: 2.5px;"></div><div class="milestones__group__label-horizontal milestones__group__label-above-horizontal milestones__group__label-last" style="position: absolute;padding: 0;color: #666;border-left: 0;margin-left: 0;bottom: 100%;right: 100%;border-right: 1px solid #000;margin-right: -6px;text-align: right;"><div class="milestones__group__label__text-horizontal" style="width: 183px;padding-top: 0px;padding-bottom: 49px;position: relative;margin-left: 0px;display: inline-block;margin-right: 3px;"><div class="wrapper" style="position: relative;margin-left: 0px;display: inline-block;margin-right: 3px;"><span class="milestones-label milestones-text-label">Viking leader Erik the Red discovers Greenland.</span><br><span class="milestones__group__label__text__title" style="color: #000;font-weight: bold;font-size: 11px;white-space: nowrap;">0981</span></div></div></div></div></div></body>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 commented
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 commented
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 commented
Closing, feel free to reopen should you have more questions.