Comments (4)
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.
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:
- 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.)
- 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.
- 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.
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.
Thanks a lot!
from qvis.
Related Issues (20)
- Improve congestion packet hover details by taking into account event order/index
- Bug in live version, cannot load multiple files by URL HOT 4
- Bug in live version -- only display first few packets in sequence view HOT 2
- Visualize pacing_rate HOT 2
- Bug in live version--qvis not able to upload qlog files for Visualization. HOT 5
- Visualizing Streams in Qlogs HOT 1
- Import Qlogs from a different computer HOT 2
- Maybe can support the odd number stream id in the multiplexing? HOT 2
- Bug in live version
- Bug in live version | It seems the website is down HOT 1
- Extracting qlog files from Firefox HOT 2
- When I load a 300M qlog file, the website crashes HOT 2
- "Option N" text overlaps with heading on screens that are <768px wide HOT 1
- QUIC version 2 from qlog is not reflected
- qvis.quictools.info returning 500 HOT 2
- Feature request HOT 3
- A qlog file formated with json-seq HOT 4
- Demo Website Access Error HOT 2
- Recurso
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qvis.