SVG API
Оптимізуйте SVG-розмітку пресетами SVGO й кодуйте будь-яке зображення в чистий, готовий для CSS data URI — через простий JSON REST-контракт.
Два ендпоінти, одна задача: зменшити SVG-розмітку або загорнути будь-яке зображення в data: URI для вбудовування. Обидва працюють на сервері, тож результат детермінований і однаковий у всіх браузерах.
# Optimize an SVG snippet
curl -X POST https://jinero.online/api/v1/svg/optimize \
-H "Content-Type: application/json" \
-d '{"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2L2 22h20z\"/></svg>", "preset": "balanced"}'const r = await fetch("https://jinero.online/api/v1/svg/optimize", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ svg: source, preset: "balanced" }),
});
const { output, savings_percent } = await r.json();Усі ендпоінти публічні — ключ не потрібен. Операції без стану й легкі, тож ліміти щедрі.
# Anonymous limits (per IP):
# POST /svg/optimize 30 req/min
# POST /svg/to-datauri 30 req/min
# GET /svg/presets 60 req/min
# Max SVG body: 500,000 chars (~500 KB)Пропускає SVG-розмітку через SVGO з одним із трьох пресетів. Видаляє метадані, згортає трансформації, округлює дані контурів — зазвичай на 30–60% менше без візуальних змін.
https://jinero.online/api/v1/svg/optimize
| Параметр | Тип | Опис |
|---|---|---|
svg |
string | SVG-розмітка (з XML-прологом чи без). До 500 000 символів. |
preset |
string | safe (мінімальне очищення), balanced (за замовчуванням — найкраще співвідношення розміру й безпеки), aggressive (максимальне стиснення, може змінити рендеринг SVG з великою кількістю фільтрів). |
curl -X POST https://jinero.online/api/v1/svg/optimize \
-H "Content-Type: application/json" \
-d @- <<JSON
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"red\"/></svg>",
"preset": "aggressive"
}
JSONconst r = await fetch("https://jinero.online/api/v1/svg/optimize", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ svg: source, preset: "aggressive" }),
});
const data = await r.json();
console.log(`-${data.savings_percent}%`);$res = Http::post("https://jinero.online/api/v1/svg/optimize", [
"svg" => $svgSource,
"preset" => "balanced",
]);
$optimized = $res->json("output");{
"success": true,
"preset": "aggressive",
"output": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"red\"/></svg>",
"original_size": 132,
"optimized_size": 70,
"savings_bytes": 62,
"savings_percent": 46.97
}Загортає зображення в data: URI, готовий для CSS background-image, HTML src чи SVG href. Приймає сирий SVG-текст, завантажений файл (svg/png/jpg/gif/webp) або URL, який треба завантажити.
https://jinero.online/api/v1/svg/to-datauri
| Параметр | Тип | Опис |
|---|---|---|
svg |
string | Сирий SVG-текст. Не можна поєднувати з image/url. |
image |
файл (multipart) | Завантажте файл svg/png/jpg/gif/webp. До 5 МБ. |
url |
string | Публічний URL зображення для завантаження. До 2048 символів. |
options.encoding |
string | utf8 (за замовчуванням для SVG, менше в CSS) або base64 (за замовчуванням для растру). |
options.quotes |
string | single або double (за замовчуванням) — впливає на екранування лапок атрибутів усередині data URI. |
# Option 1: raw SVG text
curl -X POST https://jinero.online/api/v1/svg/to-datauri \
-H "Content-Type: application/json" \
-d '{"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"red\"/></svg>"}'
# Option 2: file upload
curl -X POST https://jinero.online/api/v1/svg/to-datauri \
-F "[email protected]"
# Option 3: URL fetch
curl -X POST https://jinero.online/api/v1/svg/to-datauri \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com/icon.png"}'// Inline SVG → CSS data URI
const r = await fetch("https://jinero.online/api/v1/svg/to-datauri", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
svg: svgSource,
options: { encoding: "utf8", quotes: "double" },
}),
});
const { data_uri, css } = await r.json();
// data_uri → use anywhere
// css → background-image: url("…");{
"success": true,
"data_uri": "data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"%3E%3Ccircle cx=\"12\" cy=\"12\" r=\"10\" fill=\"red\"/%3E%3C/svg%3E",
"css": "background-image: url(\"data:image/svg+xml,…\")",
"mime": "image/svg+xml",
"encoding": "utf8",
"input_size": 132,
"output_size": 187
}Повертає доступні пресети з коротким зрозумілим описом — зручно для заповнення інтерфейсів налаштувань.
https://jinero.online/api/v1/svg/presets
curl https://jinero.online/api/v1/svg/presetsconst r = await fetch("https://jinero.online/api/v1/svg/presets");
const { presets } = await r.json();{
"presets": [
{ "key": "safe", "name": "Safe", "description": "Minimal optimization, preserves most attributes" },
{ "key": "balanced", "name": "Balanced", "description": "Good compression with minimal visual changes" },
{ "key": "aggressive", "name": "Aggressive", "description": "Maximum compression, may affect some SVG features" }
]
}Стандартна семантика HTTP. Помилки повертають JSON із полем "message".
// 422 — validation (oversized SVG, unknown preset, invalid URL)
{ "message": "The preset field must be one of: safe, balanced, aggressive." }
// 422 — input missing on /to-datauri
{ "message": "Provide one of: svg (text), image (file), or url" }
// 422 — SVGO crashed on malformed markup
{ "message": "Invalid SVG: unexpected end of input" }
// 429 — rate limit exceeded
{ "message": "Too Many Attempts." }Про SVG API jinero.online
Безкоштовний REST API для оптимізації SVG і кодування в data URI — той самий рушій SVGO, що й у всіх, а також єдиний ендпоінт to-datauri, який приймає текст, файли чи URL.
SVGO під капотом
Оптимізатор — це SVGO з трьома ретельно налаштованими пресетами: той самий рушій, що й у популярного SVGOMG, доступний як REST API.
Три способи передати, один ендпоінт
/svg/to-datauri приймає сиру розмітку, завантажений файл або URL — обирайте те, що пасує до вашого запиту.
Результат, готовий для CSS
Відповіді з data URI містять готовий CSS-фрагмент, тож результат можна вставити просто в таблицю стилів без екранування.
Без зберігання файлів
Оптимізація повністю в пам'яті. Завантажені файли видаляються одразу після формування відповіді — нічого не треба прибирати.
Часті запитання
Ні. SVG API публічний, з лімітом запитів на IP — 30 запитів/хв на /optimize і /to-datauri, 60 — на /presets.
"balanced" — правильний вибір за замовчуванням: він видаляє метадані, зменшує точність чисел і згортає трансформації, але ніколи не змінює рендеринг. "aggressive" використовуйте, лише коли контролюєте SVG і візуально порівняли результат, бо він може видаляти примітиви фільтрів і об'єднувати контури.
Для SVG utf8 (з URL-кодуванням) менший і зручний для CSS — тому він за замовчуванням. Для бінарних форматів на кшталт PNG, JPG чи WebP base64 — єдиний варіант, і ми застосовуємо його автоматично.
SVG-розмітка: 500 000 символів (~500 КБ). Завантаження файлів (поле image): 5 МБ. Завантаження за URL: жорсткого обмеження на віддалений файл немає, але ми перериваємо завантаження, якщо відповідь перевищує 5 МБ.
З пресетами "safe" і "balanced" — так: результат рендериться однаково в сучасних браузерах. "aggressive" може відкидати примітиви фільтрів, об'єднувати схожі контури й сильніше округлювати координати, що може вплинути на рендеринг SVG, побудованих на фільтрах. Після зміни пресета завжди перевіряйте результат.