Tools for caching and serving encoded SVGs for Elixir/Phoenix.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
LICENSE
README.md
mix.exs
mix.lock

README.md

SVG hex.pm hexdocs.pm

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.
  • "Heresy" name and logo: Copyright © 2017 Heresy Software Ltd