What code formats can SVGX copy or generate for SVG assets?

Updated

SVGX can output four practical code formats from a single SVG file: full SVG markup, inner SVG markup, URL-encoded SVG code, and CSS background-image code. It also generates CSS background property values for background-repeat, background-position, and background-size after you preview them. All of these are copy-to-clipboard actions, so the workflow is: find the SVG in SVGX, preview or edit it, then copy the format your project needs.

The four copy/generate formats

Format What you get Typical use
Full SVG markup The entire <svg>...</svg> element Pasting a complete icon directly into HTML, JSX, or a template
Inner markup Only the contents inside the <svg> tag Injecting paths/shapes into an existing <svg> wrapper you already control
URL-encoded SVG The SVG code encoded for use inside a URL background-image: url("data:image/svg+xml,...") or inline data URIs
Background image CSS A ready-to-use background-image declaration CSS backgrounds, sprites, and pattern work

The distinction between full and inner markup matters when your framework or component already provides the outer <svg> element. Copying inner markup avoids nested <svg> tags, which can break rendering or styling.

Background property code generation

Beyond the background-image declaration itself, SVGX previews how an SVG behaves as a repeating or positioned background and then generates the matching CSS. The page lists three properties you can preview and grab code for:

  • background-repeat — useful for SVG patterns that tile
  • background-position — controls where the image sits in the element
  • background-size — controls scaling, including values like contain or cover

The workflow is preview-first: you adjust the values, see the result on transparent or colored backgrounds, then copy the generated code. This is more reliable than writing background shorthand by hand, because you confirm the visual result before pasting.

How to get each format

  1. Locate the SVG using SVGX's search, which tracks icons across deeply nested folders.
  2. Preview and zoom the file to confirm it's the right asset.
  3. Optionally edit the SVG markup inline — changes render instantly, so you can verify before copying.
  4. Choose the output:
    • Copy full markup or inner markup for direct embedding.
    • Copy URL-encoded code when you need a data URI.
    • Copy background-image CSS, or preview and copy the background repeat/position/size values.
  5. Paste into your project.

SVGX also includes built-in optimization via the SVGO library, and you can export the original or optimized SVG, or save as PNG. If you optimize before copying, the markup you paste is the optimized version.

Practical notes

  • Optimization affects output. Since optimization uses SVGO, copying after optimizing gives you smaller markup — relevant when inlining many icons or embedding data URIs.
  • URL encoding is for embedding, not editing. Encoded SVG is hard to read or hand-edit, so keep the original file for maintenance and use the encoded form only where a URL is required.
  • Background previews need a background choice. SVGX lets you check icons on transparent or colored backgrounds, which helps catch icons that assume a light or dark backdrop before you commit the CSS.
  • Bookmarks and Recents help when you return to the same assets repeatedly, so you don't re-search for the file each time you need another output format.

For availability: SVGX is a free desktop app for Mac and PC, currently at v1.2.0. It is not open source, though source access can be purchased on GitHub under a Gitware distribution model. The app is not distributed through the Apple or Microsoft stores and is not signed or store-verified, so review the download carefully before installing.