4 September 2014 · About 1 minute read

Rails: Rendering Dynamic SVG Images in respond_to

SVG is a vector image described in XML. This post shows how to to render SVG images inline with Rails.

This can be used, for example, in an html img tag to generate charts, icons and other dynamic graphics.

1. Register a new MIME type for the SVG response

# config/initializers/mime_types.rb
Mime::Type.register "image/svg+xml", :svg

2. Register a route to view your generated SVG

# config/routes.rb
get "icons/generate" => "icons#generate", format: :svg

3. Generate your SVG

Here I’m generating the SVG inline, but it could come from anywhere (e.g. model.as_svg).

Be sure to include the xml namespace (xmlns) in the svg tag, otherwise browsers just render the content as XML. This caught me out for a little while.

class IconsController < ApplicationController
  def generate
    svg = '<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

4. Add your Respond Block

In your controller, add a respond to block, render the SVG.

def generate
# ...svg = ...

  respond_to do |format|
    format.svg { render inline: svg}

To view the generated SVG, start the server and visit http://localhost:3000/icons/generate.svg

Learn how to keep your Rails apps fast, secure and running in top condition.

The Ruby and Rails worlds move fast, so it can feel like no time at all before your app starts to feel left behind.

Slow pages, memory, new gems, a constant stream of security patches, changing third-party APIs, and growing demands on your server's resources all work tirelessly against your app.

While your app launched with a strong foundation— the latest gems, employing best practices, and developing a thorough test suite—it needs constant attention and maintenance to keep running in top condition.

In Keep Your Ruby on Rails App Healthy, you'll learn about the tools and techniques for keeping your Ruby on Rails app running smoothly, and how to apply them to your apps.

The course delivers a range of practical and actionable lessons to enhance and protect your app right away, from simple, quick–win optimisations and setting up thorough monitoring to reviewing your site's performance, and checking your code against security vulnerabilities current best practices.

“I really enjoyed the book. A lot of quick wins for me to implement and makes me realise I can do more with guard.” –– Ben (@r0_0tKat)

Keep Your Ruby on Rails App Healthy is available as both an email course, and as a premium download edition.

The email course is split up into 7 lessons, delivered to your inbox over the course of a month.

The premium edition is available for instant download in PDF, ePub and Mobi (Kindle) format.

Start Email Course Buy Premium $9 (plus EU VAT)

rails howto programming svg
Chris Blunt
Chris Blunt @cblunt
Chris is the founder of Plymouth Software. As well as code and business, he enjoys being a Dad, swimming, and the fine art of drinking tea.