Code Monkey home page Code Monkey logo

Comments (4)

rmarx avatar rmarx commented on August 24, 2024 1

So I just tried this out myself and it's indeed the use of foreignObject that's messing things up.

This means you have to embed the svg inside a proper html tag, like so:

<!doctype html><html><body>
COPY-PASTED SVG HERE
</body></html>

You then also have to add namespace declarations to the svg element itself, for example:

<svg id="sequence-diagram-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" height="1420" width="2025" viewbox="0 0 2025 1420">

Using that, I get everything to show up when viewing the resulting .html file in the browser and I can also print it to PDF (though scaling is sometimes... dubious as I indicated above). There's also a problem with the font being times new roman default, which can be fixed by having on top (right after <body>):

<style>
* { font-family: "Trebuchet MS"; }
</style>

It's not perfect, but maybe with a few more tweaks you can get something workable out of it!

See an example I just made here:
svg_test - Copy.zip

from qvis.

rmarx avatar rmarx commented on August 24, 2024

Hello @mickel8,

Good to hear the tools are useful to you. Please share your master's thesis when it's done (or before ;)), I would be interested in reading it!

There are some issues with your request:

  1. the sequence diagram dynamically generates the SVG on the fly as you scroll (generally: 1 screen height back and 1 screen height forward are rendered) for performance reasons. Direct export of this would probably require post-hoc manual changes, while export of "only what's on screen" is difficult due to arrows starting and ending off-screen (would require extra logic to setup clipping rects etc.)
  2. I'm using some nasty properties of SVG to make things look nice. Mainly: the ability to embed normal HTML (as SVG itself doesn't provide proper text-wrapping for example). This works nicely in the browser, but I've seen many "normal" SVG viewers/program choke on that.
  3. For print, you typically want bigger fonts, thicker arrows, etc. I typically get this by zooming in using the browser built-in zoom and making my window smaller and then taking a pixel screenshot on a high-res screen. Hardly optimal, I agree, but somewhat workable, at least for me.

As such, for now, all I could offer would be a direct SVG export of whatever is rendered internally by the tool without added frills (as those would require implementation work I don't have).

That SVG can be gotten from the Chrome devtools HTML inspector manually as well. You mention you tried this, but it didn't work. Do you have additional info on what didn't work concretely? What did you try? What are you trying to accomplish? Maybe I can help you figure this out if that's sufficient for what you'd need?

In the future, I'd like to add proper export options to qvis for all diagrams (e.g., adjust font sizes, add filtering like you say, etc.) but that's a bigger project than I can take on atm.

from qvis.

mickel8 avatar mickel8 commented on August 24, 2024

Please share your master's thesis when it's done (or before ;)), I would be interested in reading it!

Sure! It's nothing special but as soon as it will be ready I will send it to you 😉

That SVG can be gotten from the Chrome devtools HTML inspector manually as well. You mention you tried this, but it didn't work. Do you have additional info on what didn't work concretely? What did you try? What are you trying to accomplish? Maybe I can help you figure this out if that's sufficient for what you'd need?

I just tried to copy this svg element and save it as diagram.svg. I also tried to save it as raw .html file and print it to pdf.
The second option gave me pdf file with diagram but there some colors, labels etc. were missing.

In the future, I'd like to add proper export options to qvis for all diagrams (e.g., adjust font sizes, add filtering like you say, etc.) but that's a bigger project than I can take on atm.

Sounds great! At this moment I am just saving it as png. It's not so comfortable but it works 😄

from qvis.

mickel8 avatar mickel8 commented on August 24, 2024

Thanks a lot!

from qvis.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.