Skip to content

Conversation

@elalemanyo
Copy link

@elalemanyo elalemanyo commented Aug 15, 2025

This PR introduces a new helper method, inline_svg_data_url, to the `InlineSvg::ActionView::Helpers module.
It allows users to render an SVG and return its content as a base64-encoded data URL, suitable for embedding directly in HTML or CSS.

  • Reuses all existing SVG transformations and asset lookup logic.
  • Removes XML declaration and minifies whitespace before encoding.
  • Includes dedicated tests for the new method.

This feature addresses issue #169, which requested support for returning SVGs as data URLs for use in CSS and other scenarios.

No breaking changes; all existing helpers and tests remain unchanged.

The new helper was tested in the basic Rails app) and works as expected.

<h2>Using SVG as background image</h2>
<div class="size-sm svg-background" style="--svg-background-image: url('<%= inline_svg_data_url("iconmonstr-glasses-12-icon.svg") %>');"></div>
<div class="size-sm svg-background" style="--svg-background-image: url('<%= inline_svg_data_url("iconmonstr-glasses-12-icon.svg", style: "fill: green;") %>');"></div>
<div class="size-sm svg-background" style="--svg-background-image: url('<%= inline_svg_data_url("iconmonstr-glasses-12-icon.svg", style: "fill: red;") %>');"></div>
.svg-background {
  background-image: var(--svg-background-image);
  background-size: cover;
}

.size-sm {
  width: 5em;
  height: 5em;
}

With this new helper, it’s now possible to use SVGs from your Rails app directly as CSS background images, or anywhere a data URL is accepted.
Additionally, because the helper supports all existing transformation options, you can easily customize aspects of the SVG—such as color, size, or other attributes—before encoding, making it flexible for dynamic styling and theming.

Copy link
Contributor

@tagliala tagliala left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi there,

Just sharing a few observations as a fellow contributor (not a maintainer), hoping these might be helpful for further refinement.

  • base64: The current implementation assumes the availability of the base64 library. However, in the latest Ruby versions, Base64 is no longer included in Ruby’s core or standard library by default. This change is leading many projects (see rack/rack#2110) to refactor and use plain Ruby for percent-encoding SVGs, which can often be achieved in a single line and avoids the need for an extra dependency.

  • CSP: Regarding CSP (Content Security Policy), embedding SVGs as data URLs in inline style attributes may require special consideration, as many CSP configurations restrict both 'style-src' and 'img-src' to disallow 'unsafe-inline' or 'data:' by default. Consumers of this helper might benefit from some guidance in documentation about CSP compatibility and potential caveats when using inline SVGs in styles.

  • whitespace escaping: The code currently escapes only spaces, but not newlines or other whitespace characters. It’s not immediately clear why spaces are singled out for escaping, and expanding this logic to handle all whitespace more consistently might help avoid edge cases.

  • CSS: The PR description mentions support for use in “CSS,” but just to clarify for future documentation and users: Ruby code itself cannot be executed within CSS files, and helpers like this are intended to generate data URLs for use in HTML attributes (including inline style attributes) within server-rendered views. The mention of CSS refers to possible usage of these data URLs as property values (e.g., background-image: url(...)) within HTML, not to direct Ruby-to-CSS integration. This distinction might be helpful to note to avoid confusion.

Once again, these suggestions are just intended to help strengthen the robustness and future-proofing of the helper. Looking forward to seeing how it evolves!


note: I've used Copilot to help me write this message

elalemanyo and others added 2 commits August 18, 2025 09:45
…nd update tests accordingly

Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants