What is the best way to convert a raw svg to elm/svg?

Learn
1

I have some ideas for how to animate svgs using various elm packages. To do this, I need to transform raw svgs made in inkscape into elm source code which uses elm/svg. What tools are people using for stuff like this?

I found a link to an old svg-to-elm project but the link wont load. Also, I cant seem to find anything on github.

2

I usually do it by hand, but it only works for small files, I guess :smiley:

Before that, I pass SVGs through this tool, that simplified them a lot: SVGOMG - SVGO's Missing GUI

3

If an online tool is enough this seems to work just fine: Convert SVG to Elm

1 Like
4

https://html-to-elm.com/ works for SVG too. The tool is created by one of the most knowledgeable community members and allows for customization of imports which is a freaking awesome way to avoid name clashes.

I double the suggestion by @lucamug to pass the output of Inkscape through SVGOMG in order to minimize the amount of content you will end up with.

4 Likes
5

any way to use this from cli?

6

For a SVG to elm/svg converter CLI, give it a check at GitHub - csaltos/cs-elm-svg-converter: Convert SVG files to Elm SVG code declarations

7

You can use the same logic from html-to-elm.com as an elm-review rule (the site and the elm-review rule share the same codebase).

For example, try writing some Elm code like this:

myView =
    Debug.todo """@html <ul class="flex"><li><a href="/">Home</a></li></ul>"""

And then run this command

npx elm-review@latest --template dillonkearns/elm-review-html-to-elm/example --fix-all

That command will even notice the imports you have for Html or Html.Styled and use the appropriate import aliases or exposed functions in the generated code. Enjoy!

6 Likes
8

I was thinking about writing a parcel plugin for this purpose recently. I stopped because it seemed more difficult than I thought but it would to a great thing to finish.

1 Like
9

A colleague and I wrote a CLI tool for this purpose a while back: GitHub - pinata-llc/svg2elm: Generates Elm modules out of SVG files

We also made a parcel v1 plugin: GitHub - pinata-llc/parcel-plugin-elm-svg: Use SVG files from Elm seamlessly

1 Like
10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.