Dash: Support for SVG

[mr-bjerre]

It seems that there are no support for html.Svg. Am I missing something or am I right?

Otherwise it is definitely a feature request from my side.

[ned2]

While similar to HTML in some ways, SVG is a distinct markup-language. For example, SVG uses a similar but distinct set of CSS selectors. The HTML Components made available in dash-html-components are generated programmatically from this MDN reference page for HTML elements.

SVG support would be great though; I agree. Perhaps a way to add SVG support could be the creation of a separate package dash-svg-components that generates components from the relevant MDN SVG elements reference page.

In the meantime, one workaround would be to generate SVG images which you add using <img> elements. You could create SVG images in your Dash app using a Python SVG library, which there'll be plenty to choose from, and save them as .svg files, which you can specify as the src attribute of html.Img components.

[chriddyp]

Yeah, dash-svg-components would be very cool. Here are the scripts that generate the HTML components from MDN: https://github.com/plotly/dash-html-components/tree/master/scripts. I bet that they could be adapted to work with SVG relatively easily.

[jackdbd]

Hi everyone! I like Dash and would like to contribute.
I created a script to scrape the SVG elements from the MDN web docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element

But I guess I have to scrape the attributes from this other page:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

Here is the script:
https://github.com/jackdbd/dash-svg-components/blob/master/scripts/extract-attributes.js

[chriddyp]

Nice @jackdbd !!

[chriddyp]

@jackdbd - Keep us posted on your progress! Hopefully scraping the attributes is similar to the HTML script here: https://github.com/plotly/dash-html-components/blob/master/scripts/extract-attributes.js. Once we get that done, we can move the repo over to the plotly organization and add you as a contributor (unless like you'd like to manage it yourself)

[jackdbd]

@chriddyp I moved to a promise-based solution.

For moving the repo to plotly I have to click on Transfer ownership. Right?

[chriddyp]

very nice! Yeah, I think Transfer ownership is right. I'll add you to the plotly organization

[jackdbd]

Thanks @chriddyp - let me know if the trasfer was fine

[chriddyp]

Thanks @chriddyp - let me know if the trasfer was fine

Looks good to me! The repo is here: https://github.com/plotly/dash-svg-components/. Let's work off of pull requests in that repo. Feel free to tag me for review!

[zyxue]

Any update to this issue, please? Does Dash support SVG now? I tried the html.Img approach, it works to some extent, but all the hyperlinks in the svg become unclickable.

[ned2]

Doesn't look like there's been any development on dash-svg-components since it was transferred.

The other approach that you could take is to use D3.js to manipulate SVG and wrap it up as a Dash component.