Tối ưu, làm sạch và chuyển SVG API

Tối ưu SVG bằng svgo, gỡ script và liên kết ngoài khỏi SVG không tin cậy, xem thông tin, hoặc chuyển SVG sang PNG / JPEG mọi cỡ, không cần trình duyệt.

GETPOSThttps://apibox.io.vn/v1/svg-tools

Ảnh & Mã▶ Dùng thử online

Bốn thao tác trên một file SVG (gửi qua svg, file tải lên, body thô image/svg+xml hoặc url). optimize (mặc định) chạy svgo với bộ quy tắc mặc định nhưng giữ lại id và thuộc tính role, để CSS, script và #anchor trỏ vào file vẫn chạy; có thêm precision, multipass, pretty và aggressive=true (bộ quy tắc gốc + bỏ width/height), còn sanitize=true làm sạch file trước khi tối ưu. sanitize gỡ mọi thứ có thể chạy mã hoặc làm lộ dữ liệu: <script>, thuộc tính sự kiện on…, liên kết javascript: và data: không phải ảnh raster, <foreignObject>, <iframe> / <embed>, ảnh và stylesheet bên ngoài (@import, url(https://…)) trừ khi đặt allow_external=true, và các hiệu ứng động đổi liên kết. Kết quả liệt kê từng mục đã gỡ. info cho biết dung lượng, viewBox, số phần tử, có script hay liên kết ngoài không.

render chuyển SVG thành PNG (mặc định) hoặc JPEG bằng bộ vẽ riêng viết bằng JavaScript (không dùng trình duyệt headless hay resvg): path với mọi lệnh kể cả cung tròn, các hình cơ bản, nhóm và phép biến đổi, svg lồng nhau, use / symbol, tô màu (non-zero / even-odd) và nét vẽ (đầu nét, góc nối, miter limit, nét đứt), độ trong suốt, gradient tuyến tính và tỏa tròn, clip-path, mask độ sáng, quy tắc <style> đơn giản (thẻ, .class, #id), ảnh PNG / JPEG nhúng và chữ vẽ từ phông nhúng (Be Vietnam Pro cho sans-serif, JetBrains Mono cho monospace, STIX Two Math cho serif) nên tiếng Việt hiển thị đúng dấu. Đặt width và / hoặc height (tối đa 4096 px, 5 megapixel) hoặc scale, và background.

Chưa hỗ trợ: filter (làm mờ, đổ bóng), pattern, marker, textPath, ảnh bên ngoài và web font; các phần bị bỏ qua được liệt kê trong header x-render-warnings (hoặc warnings khi format=json). Trên bộ SVG thử nghiệm, ảnh ra khớp với Chrome, chỉ lệch ở mức khử răng cưa. File xử lý trong bộ nhớ và không được lưu.

Tham số

Tên	Vị trí	Kiểu	Bắt buộc	Mặc định
`svg`	body\|query	string	không		Mã SVG (hoặc gửi `file` dạng multipart, body thô `image/svg+xml`, `file_base64` hay `url`).
`file`	body	file	không		File SVG tải lên.
`url`	query\|body	string	không		URL công khai của file SVG (tối đa 5 MB).
`action`	query\|body	string	không	`optimize`	`optimize`, `sanitize`, `render` hoặc `info`.
`precision`	query\|body	number	không	`3`	optimize: số chữ số thập phân giữ lại (0–8).
`multipass`	query\|body	boolean	không	`true`	optimize: lặp lại tới khi file không nhỏ thêm.
`pretty`	query\|body	boolean	không	`false`	optimize: xuống dòng, thụt lề cho dễ đọc.
`aggressive`	query\|body	boolean	không	`false`	optimize: dùng nguyên preset-default của svgo (dọn id) + bỏ width/height + sắp xếp thuộc tính.
`sanitize`	query\|body	boolean	không	`false`	optimize: làm sạch trước khi tối ưu.
`allow_external`	query\|body	boolean	không	`false`	sanitize: giữ tham chiếu ảnh / stylesheet http(s) bên ngoài.
`width`	query\|body	number	không		render: chiều rộng ảnh, px (≤ 4096); bỏ trống chiều cao thì giữ tỷ lệ.
`height`	query\|body	number	không		render: chiều cao ảnh, px (≤ 4096).
`scale`	query\|body	number	không	`1`	render: hệ số nhân kích thước SVG khi không đặt width / height (0,05–16).
`background`	query\|body	string	không		render: màu nền (mặc định trong suốt với PNG, trắng với JPEG).
`format`	query\|body	string	không		render: `png` (mặc định), `jpeg` hoặc `json` (PNG base64 + cảnh báo); optimize / sanitize: `svg` trả thẳng file SVG thay vì JSON.
`quality`	query\|body	number	không	`90`	render: chất lượng JPEG (1–100).

Ví dụ

curl -X POST "https://apibox.io.vn/v1/svg-tools" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><!-- Logo --><metadata>Created by Editor 1.0</metadata><g id=\"logo\"><rect x=\"10.000\" y=\"10.000\" width=\"100.000\" height=\"100.000\" rx=\"20\" fill=\"#0F766E\"/><circle cx=\"60\" cy=\"60\" r=\"30.0000\" fill=\"#ffffff\" fill-opacity=\"1\"/></g></svg>"}'

const res = await fetch('https://apibox.io.vn/v1/svg-tools', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><!-- Logo --><metadata>Created by Editor 1.0</metadata><g id=\"logo\"><rect x=\"10.000\" y=\"10.000\" width=\"100.000\" height=\"100.000\" rx=\"20\" fill=\"#0F766E\"/><circle cx=\"60\" cy=\"60\" r=\"30.0000\" fill=\"#ffffff\" fill-opacity=\"1\"/></g></svg>"
  }),
});
const data = await res.json();
console.log(data);

import requests

res = requests.post(
    "https://apibox.io.vn/v1/svg-tools",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><!-- Logo --><metadata>Created by Editor 1.0</metadata><g id=\"logo\"><rect x=\"10.000\" y=\"10.000\" width=\"100.000\" height=\"100.000\" rx=\"20\" fill=\"#0F766E\"/><circle cx=\"60\" cy=\"60\" r=\"30.0000\" fill=\"#ffffff\" fill-opacity=\"1\"/></g></svg>"},
    timeout=30,
)
print(res.json())

<?php
$ch = curl_init('https://apibox.io.vn/v1/svg-tools');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY', 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => '{"svg":"<svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" width=\\"120\\" height=\\"120\\" viewBox=\\"0 0 120 120\\"><!-- Logo --><metadata>Created by Editor 1.0</metadata><g id=\\"logo\\"><rect x=\\"10.000\\" y=\\"10.000\\" width=\\"100.000\\" height=\\"100.000\\" rx=\\"20\\" fill=\\"#0F766E\\"/><circle cx=\\"60\\" cy=\\"60\\" r=\\"30.0000\\" fill=\\"#ffffff\\" fill-opacity=\\"1\\"/></g></svg>"}',
]);
$response = curl_exec($ch);
print_r(json_decode($response, true));

Kết quả trả về

{
  "action": "optimize",
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><g id=\"logo\"><rect width=\"100\" height=\"100\" x=\"10\" y=\"10\" fill=\"#0f766e\" rx=\"20\"/><circle cx=\"60\" cy=\"60\" r=\"30\" fill=\"#fff\"/></g></svg>",
  "original_bytes": 362,
  "optimized_bytes": 223,
  "saved_bytes": 139,
  "saved_percent": 38.4,
  "preset": "preset-default (ids and role kept)",
  "precision": 3
}

Ứng dụng

Giảm dung lượng icon, logo trước khi đưa lên website
Làm sạch SVG người dùng tải lên (avatar, logo) trước khi hiển thị
Chuyển logo SVG sang PNG để dùng trong email, mạng xã hội
Tạo ảnh xem trước PNG cho kho SVG trong CMS hoặc design system

Hỏi đáp

SVG sau khi tối ưu có bị đổi hình không?

Bộ quy tắc mặc định không làm đổi hình ảnh; số được làm tròn theo precision (3) chữ số thập phân. Id được giữ để CSS / JS bên ngoài vẫn chạy; dùng aggressive=true nếu muốn bỏ cả id thừa lẫn width / height.

Làm sạch xong thì nhúng SVG vào HTML có an toàn không?

API gỡ script, thuộc tính sự kiện, URL chạy script, HTML lạ, tải tài nguyên ngoài và hiệu ứng đổi liên kết, tức là các đường tấn công XSS qua SVG đã biết. Bạn vẫn nên phục vụ file người dùng kèm Content-Security-Policy chặt.

Vì sao ảnh PNG khác với trên trình duyệt?

Filter, pattern, marker và web font chưa được hỗ trợ; header x-render-warnings cho biết phần nào bị bỏ qua. Chữ được vẽ bằng phông nhúng nên dáng chữ có thể khác phông bạn dùng khi thiết kế.

Tối ưu, làm sạch và chuyển SVG API

Tham số

Ví dụ

Kết quả trả về

Ứng dụng

Hỏi đáp

API liên quan

Tạo mã QR

Tạo mã vạch

Ảnh placeholder