Convert SVG to data URI for CSS

Run — free

Runs in your browser. Free, unlimited — your data never leaves this page.

The converter first checks that the input is well-formed XML, then encodes the document as UTF-8 and escapes every character that could change URL or CSS parsing. The result starts with the SVG media type and contains no base64 layer, making it straightforward to inspect, copy, cache, and version alongside your styles.

How to use it

Enter your values in the form above. The tool checks them before calculating and shows the result on the same page.

Check your inputs

Use the labels and units shown next to each field. If something is missing or outside the allowed range, the page points to the field to fix.

Use it again or automate it

Use the browser tool for individual checks and the API when you need the same capability in an automated workflow.

What you can do with it

Get an answer now

Enter one set of values and see the result without building a spreadsheet or script.

Compare scenarios

Change one value at a time and rerun the calculation to understand what affects the result.

Automate repeated work

Use the API when the same calculation needs to run inside your product or workflow.

FAQ

How do I use this capability?

Complete the fields above and run it on this page. The form highlights anything that needs attention.

For developers — API access

Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.

API endpoint

POSThttps://api.kit.forhosting.com/web/svg-to-data-uri

Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.

Call it from your stack

curl -X POST https://api.kit.forhosting.com/web/svg-to-data-uri \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}'

const res = await fetch("https://api.kit.forhosting.com/web/svg-to-data-uri", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/svg-to-data-uri",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-to-data-uri", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"svg":"<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"><path fill=\\"#0a7\\" d=\\"M2 2h20v20H2z\\"/></svg>"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-to-data-uri", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Example request

{
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
}

Example response

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.svg_to_data_uri",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.

Pricing

Per request$0.002

Published price — no tokens, no invented credits. A failed task is never charged.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Errors

HTTP	Code	Meaning
`401`	`unauthorized`	Missing or invalid API key.
`402`	`insufficient_balance`	Your balance doesn't cover the task price.
`404`	`unknown_type`	That task type doesn't exist.
`429`	`rate_limited`	Too many requests. Use the webhook instead of polling.

Read the full KIT documentation →