Inline the styles to be styling attributes when generating standalone SVG #36
Comments
|
Yes please! Being able to generate standalone SVG files (with the styles inlined, etc.) would be great 👍 |
|
Instead of inlining the styles you could also include the CSS within the SVG element.
|
|
Okay, standalone output is now supported. In Python, this should happen by default; it already output the styles in an inline In JS, you can call The dingus has been updated with a standalone checkbox as well, if you want to generate things one-off. I haven't tested the Python code, but it was a trivial change so it should work fine, hopefully? Let me know if there are any problems. |
|
The "standalone" diagrams generated by the online dingus still just display as black boxes when opened in Inkscape or Gnome's Image Viewer? 😕 |
|
I think that's just because those don't support CSS? Hmm, I could just inline it all into attributes, but there's no reasonable way to automatically do that in a way that supports both CSS and attributes. :( |
|
Hmmm, could it be done with some kind of post-processing step at export time? With a bit of trial&error, I was able to (manually) convert: (which displays okay in the browser, but not in Gnome's Image Viewer) into: (displays okay in both the browser and Gnome's Image Viewer). The only slight problem in Inkscape is that the curved-paths appear to be drawn as a closed-shape, which makes them look a bit strange (like a squished figure-of-eight). But that might just be because I'm using an old v0.48 of Inkscape? 🤷♂️ It looks fine when opened in GIMP. |
|
None of the paths are closed (they don't end with |
|
Ah, thanks for the hint. Did a bit more experimentation, and found that if I change |
|
Okay, so an alternative approach: since my styling isn't complicated in the first place, I can replace it with a few "fake selectors", targetting each of the objects. So you'd specify it something like: defaultStyle = {
"line-color": "black",
"line-width": "3px",
"terminal-bg": "#ccffcc",
...
}Then, if generating standalone, I can walk the graph and set attributes appropriately; otherwise, I can turn this into a stylesheet and append that, as appropriate. |
|
Happy to beta-test, when you have something ready 🙂 |
tabatkins
changed the title
|
As a workaround, I apply the following #!/usr/bin/sed -f
1 s@\([0-9]\)">@\1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">@
1 s@\(.*\)@\1\n<style type="text/css">@
1 r railroad.css
2 x
2 s@.*@</style>@p
2 x$ sed -i '' -f railroad-fix-svg.sed my-railroad.svg |
and others
Might be useful to allow generating a standalone SVG document - #35 requested it. Right now I just generate an
<svg>suitable for inserting into an HTML doc.Just need to output the
<svg>with the right namespace decls, and inline the style.The text was updated successfully, but these errors were encountered: