# SVG Ready: SVG to CSS Data URI Converter

**SVG Ready** is a web-based tool that securely converts raw SVG markup into CSS-ready Data URIs. It focuses on optimization, strict sanitization, and generating clean, performant output for use in CSS backgrounds and masks.

## Quick Start

1.  Paste raw SVG markup into the form.
2.  Choose optimization options (strip width/height, strip class, show base64).
3.  Click **Convert** or press **Cmd + Enter / Ctrl + Enter**.
4.  Copy the generated output formats (Percent-encoded Data URI, CSS snippets, etc.).

## Interface Overview

* **Input**: Raw SVG markup in a textarea.
* **Options**:
    * Strip `width` / `height` on root `<svg>` (for scalability).
    * Remove `class` on root `<svg>` (to avoid CSS conflicts).
    * Show Base64 Data URI (includes the less efficient base64 format).
* **Output**:
    * SVG Preview
    * Cleaned/Normalized Markup
    * Percent-encoded Data URI (for CSS)
    * CSS `background-image` snippet
    * CSS `mask-image` snippet
    * Base64 Data URI (if selected)
* **Metrics**: Shows input/output size difference and optimization percentage.
* **Copy buttons** for each output block.

## Conversion Options and Results

| Option | Effect | Output Snippet |
| :--- | :--- | :--- |
| **Strip Width/Height** | Removes `width` and `height` attributes from the root `<svg>`, making the SVG naturally scalable via CSS. | `<svg viewBox="...">` |
| **Strip Class** | Removes the `class` attribute from the root `<svg>`. | `<svg ...>` without `class="..."` |
| **Show Base64** | Generates an additional Base64-encoded Data URI. | `data:image/svg+xml;base64,...` |

## Security and Limitations

The tool employs **strict whitelisting** and multiple security layers to ensure safety, running securely on **Cloudflare Pages Functions** (Edge Workers).

* **Max Input Size:** 250 KB limit (`SVGConverter.ERROR_TOO_LARGE`).
* **XML Parsing Errors:** Strict checks for malformed XML and mismatched tags (`SVGConverter.ERROR_INVALID_ROOT`).
* **Disallowed Tags & Attributes (Sanitization):**
    * **Dangerous Tags Removed:** `<script>`, `<foreignObject>`, `<style>`, `<iframe>`, `<object>`, `<embed>`, `<link>`.
    * **Event Handlers Removed:** All `on*` attributes (e.g., `onload`, `onclick`).
    * **Unsafe URIs Removed:** `javascript:`, `data:text/html`, and remote HTTP/HTTPS links in `href` attributes (except for safe data URIs like `data:image/png`).
* **XXE and DOS Protection:**
    * **No XML Entities/DOCTYPE:** XML declarations and DOCTYPE are stripped out by the custom JavaScript tokenizer.
    * **Nesting Limit:** Excessive or circular nesting of `<use>` elements is blocked (limit is 15 references deep, checked by the `detectNestingRecursion` method).
    * **Stateless Edge Execution:** Operates entirely within V8 Isolates with strict memory and CPU time limits.

## Core Features

* **Serverless Architecture:** 100% serverless, hosted on Cloudflare Pages with API logic handled by Edge Functions.
* **Normalization**: Removes XML declarations (`<?xml...?>`), comments, redundant whitespace, and ensures the `xmlns` attribute is present on the root `<svg>`.
* **Encoding**: Generates **Percent-encoded Data URIs** (preferred method for modern CSS) and optional Base64 URIs.

## Privacy

* No user tracking cookies.
* Server-side error logs are dispatched securely to remote monitoring APIs (Pushover, Trigv, LogSnag) without exposing user IP addresses.
* Theme preference is saved locally in the browser only.

Built by [Webtions](https://webtions.com)