SVG

Tools for caching and serving encoded SVGs for Phoenix.

Installation

Add to your mix.exs as usual:

def deps do
  [{:svg, "~> 1.0"}]
end

If you’re not using application inference, then add :svg to your applications list.

Replacing urls to SVGs in your CSS

Using the mix svg.encode task, all references to svg files in your priv/static/css will be replaced with the base64 encoded svg.

For example, if you have an app.css file with the following contents:

.foo {
  background-url: url(/icons/add.svg)
}

it will be transformed to this:

.foo {
  background-url: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0ia...)
}

By default, task will look for SVGs in the /priv/static/images folder.

Using encoded SVGs at runtime

You need to configure :svg in your config.exs first:

config :svg, otp_app: :my_app # Replace :my_app

And then run the background server:

defmodule MyApp do
  use Application

  def start(_type, _args) do
    import Supervisor.Spec

    children = [
      # .. Ecto, Repo, etc.

      worker(SVG.Server, [])
    ]

    # ...
  end
end

The server will build up cache when the main application starts. It will concurrently read all svgs in your priv/static/images folder and cache them in memory. You can then use the base64 encoded svgs like so:

<img src="<%=raw SVG.Server.get("icons/add") %>">

Where icons/add corresponds to priv/static/images/icons/add.svg on the filesystem. You may want to alias the server when using in templates:

alias SVG.Server, as: SVG

and then you can use SVG.get/1 directly.

Utility functions

See docs for functions available on the main SVG module.

Roadmap

~~Mix task for replacing svg refs in CSS~~
Option for URI-encoding instead of Base64
Option for raw svg output (no encoding, just inline)
Use SVGO if installed locally

About

This project is sponsored by Heresy. We’re always looking for great engineers to join our team, so if you love Elixir, open source and enjoy some challenge, drop us a line and say hello!

License

svg: See LICENSE file.

SVG

v1.1.2