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

**URL:** <https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271>\
**Category:** Learn\
**Created:** [March 24, 2022, 11:29pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271 "2022-03-24T23:29:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![blakat360](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/blakat360/32/4512_2.png) [@blakat360](https://discourse.elm-lang.org/u/blakat360)\
**Post date:** [March 24, 2022, 11:29pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/1 "2022-03-24T23:29:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [March 25, 2022, 2:23am UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/2 "2022-03-25T02:23:49Z")

</div>

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

Before that, I pass SVGs through this tool, that simplified them a lot: [SVGOMG - SVGO's Missing GUI](https://jakearchibald.github.io/svgomg/)

---

<div class="post-metadata">

**Author:** ![passiomatic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/passiomatic/32/1250_2.png) [@passiomatic](https://discourse.elm-lang.org/u/passiomatic)\
**Post date:** [March 25, 2022, 1:23pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/3 "2022-03-25T13:23:40Z")

</div>

If an online tool is enough this seems to work just fine: [Convert SVG to Elm](https://levelteams.com/svg-to-elm)

---

<div class="post-metadata">

**Author:** ![pdamoc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pdamoc/32/36_2.png) [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)\
**Post date:** [March 25, 2022, 1:33pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/4 "2022-03-25T13:33:06Z")

</div>

[https://html-to-elm.com/](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.

---

<div class="post-metadata">

**Author:** ![blakat360](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/blakat360/32/4512_2.png) [@blakat360](https://discourse.elm-lang.org/u/blakat360)\
**Post date:** [March 25, 2022, 2:49pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/5 "2022-03-25T14:49:15Z")

</div>

any way to use this from cli?

---

<div class="post-metadata">

**Author:** ![csaltos](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/csaltos/32/3905_2.png) [@csaltos](https://discourse.elm-lang.org/u/csaltos)\
**Post date:** [March 27, 2022, 7:39pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/6 "2022-03-27T19:39:07Z")

</div>

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](https://github.com/csaltos/cs-elm-svg-converter)

---

<div class="post-metadata">

**Author:** ![dillonkearns](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dillonkearns/32/1587_2.png) [@dillonkearns](https://discourse.elm-lang.org/u/dillonkearns)\
**Post date:** [March 28, 2022, 6:38pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/7 "2022-03-28T18:38:32Z")

</div>

You can use the same logic from [html-to-elm.com](http://html-to-elm.com) as an `elm-review` rule (the site and the elm-review rule share the same codebase).

> **[GitHub - dillonkearns/elm-review-html-to-elm: Turn HTML into Elm. With...](https://github.com/dillonkearns/elm-review-html-to-elm)**
>
> Turn HTML into Elm. With support for elm-tailwind-modules. - GitHub - dillonkearns/elm-review-html-to-elm: Turn HTML into Elm. With support for elm-tailwind-modules.

For example, try writing some Elm code like this:

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

```

And then run this command

```nohighlight
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!

---

<div class="post-metadata">

**Author:** ![ChristophP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/christophp/32/1528_2.png) [@ChristophP](https://discourse.elm-lang.org/u/ChristophP)\
**Post date:** [March 28, 2022, 8:53pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/8 "2022-03-28T20:53:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![aguzubiaga](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/aguzubiaga/32/4117_2.png) [@aguzubiaga](https://discourse.elm-lang.org/u/aguzubiaga)\
**Post date:** [March 28, 2022, 11:12pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/9 "2022-03-28T23:12:31Z")

</div>

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](https://github.com/pinata-llc/svg2elm)

We also made a parcel v1 plugin: [GitHub - pinata-llc/parcel-plugin-elm-svg: Use SVG files from Elm seamlessly](https://github.com/pinata-llc/parcel-plugin-elm-svg)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [April 7, 2022, 11:12pm UTC](https://discourse.elm-lang.org/t/what-is-the-best-way-to-convert-a-raw-svg-to-elm-svg/8271/10 "2022-04-07T23:12:37Z")

</div>

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