SVG export: labels as text elements, not vectorized paths

[MrTomRod]

Dear @ggonnella

I would like to make your SVGs interactive in the browser. However, the SVG does not remember the names of the edges and nodes. If it's easy to achieve, could you enable me to export SVGs with <text> elements as opposed to rendered <paths>. Alternatively, it could be done using an attribute, e.g. data-contig-id="contig_1"

Example path element: <path vector-effect="none" fill-rule="nonzero" d="M3.92188,3.84375 ... L23.2969,7 L23.2969,6.5"></path> => It's impossible to know what contig this is about.

Desired output: <text fill="#000000" ...>contig_1</text> => Something like that would allow be great, now I can identify the contig via JavaScript!

Or: <path (...) data-contig-id="contig_1""></path>

I know Qt can render text as text, maybe it's really easy for you to implement this "feature".

Best, MrTomRod

PS: This is how I know Qt can render text

# pip install PyQt5
from PyQt5.QtGui import QPainter, QFont
from PyQt5.QtSvg import QSvgGenerator
from PyQt5.QtCore import QRectF, QSize
from PyQt5.QtWidgets import QApplication

# Create the application object
app = QApplication([])

# Set up the SVG generator
generator = QSvgGenerator()
generator.setFileName("output.svg")
generator.setSize(QSize(200, 200))
generator.setViewBox(QRectF(0, 0, 200, 200))
generator.setTitle("SVG Title")
generator.setDescription("Description of the SVG")

# Create a QPainter and attach it to the generator
painter = QPainter()
painter.begin(generator)

# Set the font for the painter
font = QFont("Arial", 12)
painter.setFont(font)

# Draw text
painter.drawText(QRectF(0, 0, 200, 200), "contig_1")

# Finish the painting
painter.end()

Output svg contains:

<text xmlns="http://www.w3.org/2000/svg" fill="#000000" fill-opacity="1" stroke="none" xml:space="preserve" x="0" y="11" font-family="Arial" font-size="12" font-weight="400" font-style="normal">Hello, World!</text>

[ggonnella]

Hi Thomas, thank you very much for the interesting idea. Unfortunately at the moment I am very busy with a deadline and can't do this. If you are able to change the code directly in a clone of the repository, gladly make a pull request. Best regards Giorgio

…

________________________________________ From: Thomas Roder ***@***.***> Sent: Wednesday, 5 June 2024 18:02 To: ggonnella/gfaviz Cc: Gonnella, Giorgio; Mention Subject: [ggonnella/gfaviz] SVG export: labels as text elements, not vectorized paths (Issue #73) Dear @ggonnella<https://github.com/ggonnella> I would like to make your SVGs interactive in the browser. However, the SVG does not remember the names of the edges and nodes. If it's easy to achieve, could you enable me to export SVGs with <text> elements as opposed to rendered <paths>. Example path element: <path vector-effect="none" fill-rule="nonzero" d="M3.92188,3.84375 ... L23.2969,7 L23.2969,6.5"></path> => It's impossible to know what contig this is about. Desired output: <text fill="#000000" x="0" y="11" font-family="Arial" font-size="12" font-weight="400">contig_1</text> => Something like that would allow be great, now I can identify the contig via JavaScript! I know Qt can render text as text, maybe it's really easy for you to implement this "feature". Best, MrTomRod PS: This is how I know Qt can render text # pip install PyQt5 from PyQt5.QtGui import QPainter, QFont from PyQt5.QtSvg import QSvgGenerator from PyQt5.QtCore import QRectF, QSize from PyQt5.QtWidgets import QApplication # Create the application object app = QApplication([]) # Set up the SVG generator generator = QSvgGenerator() generator.setFileName("output.svg") generator.setSize(QSize(200, 200)) generator.setViewBox(QRectF(0, 0, 200, 200)) generator.setTitle("SVG Title") generator.setDescription("Description of the SVG") # Create a QPainter and attach it to the generator painter = QPainter() painter.begin(generator) # Set the font for the painter font = QFont("Arial", 12) painter.setFont(font) # Draw text painter.drawText(QRectF(0, 0, 200, 200), "contig_1") # Finish the painting painter.end() Output svg contains: <text xmlns="http://www.w3.org/2000/svg" fill="#000000" fill-opacity="1" stroke="none" xml:space="preserve" x="0" y="11" font-family="Arial" font-size="12" font-weight="400" font-style="normal">Hello, World!</text> — Reply to this email directly, view it on GitHub<#73>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAAFI5AZL6AL66SNVS6PZJ3ZF4ZDHAVCNFSM6AAAAABI3AYKCOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGMZTMMRZGU4TQMA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[MrTomRod]

I created an ugly patch for myself: https://github.com/MrTomRod/gfaviz/tree/text-not-path

Here's the diff.

Possible issues:

• The text element is missing a stroke.
• Maybe it causes issues with the rest of the library, I didn't run any tests.

I don't know C++ and don't have time to do this properly.