MRdotB
Resvg - SVG Rendering in Elixir with Rust
Greetings Elixir community!
Today, I’m thrilled to present you with resvg_nif, an open-source project that provides Elixir bindings for the Rust-based SVG rendering library resvg. After initially exploring resvg via a port, I decided to take a plunge into creating native bindings for it.
SVG to PNG conversion:
:ok = Resvg.svg_to_png("input.svg", "output.png")
Resvg also allows direct handling of SVG content as strings:
svg_string = """
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
</svg>
"""
:ok = Resvg.svg_string_to_png(svg_string, "output.png", resources_dir: "/tmp")
To see Resvg in action, you can try the Livebook !
This NIF originated from my endeavor to create a system for generating YouTube thumbnails. After experimenting with various approaches using ImageMagick and libvips, I discovered that utilizing SVGs for conversion yielded the best results, simplifying testing in the process. The impressive support for fonts and SVG images offered by Resvg is strikingly similar to the rendering you get in a browser, making adjustments and testing much easier.
One thumbnail generated from my svg template.
Most Liked
MRdotB
I have published resvg version 0.3.0
I added a query_all function which return the pos and size of nodes with id.
Resvg.query_all("rustacean.svg")
[
%Resvg.Native.Node{
id: "Layer-1",
x: -63.99300003051758,
y: 90.14399719238281,
width: 1304.344970703125,
height: 613.6170043945312
}
]
The precompiled nif is now working on windows system.
MRdotB
Hello Kip,
Your work with image, and specifically the use of Operation.svgload_buffer(svg), was a significant source of inspiration while I was developing this library.
I encountered several issues with libvips / vix that led me to try alternative:
-
Windows Support: One of my primary requirements was compatibility with Windows. Unfortunately, as of the time of development, vix did not support it.
-
Font Loading with librsvg: I was unable to successfully get libvips to load my specific font.
-
SVG local file resolution: Another challenge I faced pertained to the svg element
<image>in librsvg when resolving local files.
I found resvg to be more compatible with my requirements. Resvg allowed you to specify the :resources_dir, facilitating the resolution of images from this path:
path = "/project/assets/"
svg_string = """
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<image xlink:href="mdn-logo.png" width="200" height="200" />
<image xlink:href="mdn-logo.png" x="200" width="200" height="200" />
</svg>
"""
Resvg.svg_string_to_png_buffer(svg_string, resources_dir: path)
Moreover, I found that resvg provided results that closely matched those from the browser. This aspect was particularly important to me as I heavily rely on the browser to create the svg templates and making adjustments.
MRdotB
The :rustler_precompiled nif does not work on windows but the self compiled work. I’m new to rustler and friends. I will try to fix it asap.
aiwaiwa
kip
If for some reason that’s not possible in revsg you can do it in image with:
"<svg> .....</svg>"
|> Image.from_svg!()
|> Image.write(conn)
Unfortunately the underlying vix isn’t supported on Windows so if that’s a requirement then this isn’t the solution for you. Also it uses librsvg as the svg renderer, not libresvg.








