question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVG files saved with vector-effect:non-scaling-stroke XML option

See original GitHub issue

When SVG figure files are saved using plotly.offline, the SVG image’s XML code uses the style option vector-effect:non-scaling-stroke for lines associated with scatter traces, but not for graph axes or other lines. When importing these SVG files into vector graphic software packages like Inkscape, this option results in trace lines remaining the same width regardless of the level of zoom, making it difficult to ensure lines are of the desired width. Below is a command line MWE, and some images showing how the generated SVG behaves in Inkscape.

import numpy as np
import plotly
from plotly.offline import iplot
plotly.offline.init_notebook_mode()

trace = {
                'x' : np.arange(0,10),
                'y' : np.arange(0,10),
                'type' : 'scatter',
                'mode' : 'lines+markers',
                'marker' : {'size': 4,  'symbol' : 0},
                'name' : 'Minimal Working Example',
                'line' : {'width' : 1.5,},
         }

fig = {'data': [trace]}

plotly.offline.plot(
        fig,  filename = 'mwe.html', image='svg', output_type='file',
        image_filename = 'mwe', auto_open = False
    )

Screen Shot 2019-04-30 at 1 19 43 pm Screen Shot 2019-04-30 at 1 20 37 pm

In Inkscape, the vector-effect:non-scaling-stroke option also prevents you from editing the widths of lines. One solution is to manually change the XML code to vector-effect:none to stop this behaviour, although this is extremely tedious for figures with many traces.

I suspect the overwhelming majority of users would prefer vector-effect:none for their SVG images. If not, perhaps an option could be created so that the user could choose. I’ve had a brief look at the plotly source and suspect this needs to be implemented in Orca. If this sounds like a good idea, I would love to attempt the change myself, but will probably need some guidance as to where to look in the Orca code.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:2
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
etpinardcommented, Apr 30, 2019

Would removing vector-effect:non-scaling-stroke result in any change in appearance for figures when displayed live?

It wouldn’t result in any visual changes on first draw, but it would on scroll zoom (see https://github.com/plotly/plotly.js/issues/1899).

It sounds to me like we could remove that vector-effect:non-scaling-stroke on static exports.

2reactions
eshort0401commented, May 2, 2019

It wouldn’t result in any visual changes on first draw, but it would on scroll zoom (see plotly/plotly.js#1899).

It sounds to me like we could remove that vector-effect:non-scaling-stroke on static exports.

That would be my preference as a user. I think the non-scaling zoom behaviour makes sense for live figures, but not for static ones.

Read more comments on GitHub >

github_iconTop Results From Across the Web

css svg and vector-effect="non-scaling-stroke" browser ...
From various sources I gather that vector-effect="non-scaling-stroke" in svg should work in the current versions Opera, Firefox and Chrome. (Not ...
Read more >
Scalable Vector Graphics (SVG) - CorelDRAW Help
SVG files are described in Extensible Markup Language (XML). They are vector graphic images, which can provide superior detail and faster download times ......
Read more >
Svg with non-scaling strokes - General - Forum | Webflow
I came across the vector-effect="non-scaling-stroke" ... I save the file and replace the logo in Webflow with that file (just like uploading ...
Read more >
Release notes/1.0 - Inkscape Wiki
Files can also be saved as Inkscape SVG without calling the GUI save dialog (new command: --export-inkscape-svg ); Multiple objects in single ...
Read more >
SVG Files: What They Are and How to Open & Convert Them
An SVG file is a Scalable Vector Graphics file. SVG files use an XML-based text format to describe how an image should appear...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found