Skip to content
/ svg Public

Tools for caching and serving encoded SVGs for Elixir/Phoenix.

License

Notifications You must be signed in to change notification settings

svileng/svg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

License

  • svg: See LICENSE file.

About

Tools for caching and serving encoded SVGs for Elixir/Phoenix.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages