Tối ưu SVG, làm sạch SVG và chuyển SVG sang PNG online
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.
Kết quả
Bấm “Chạy” để xem kết quả.
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.
Dùng trong code của bạn
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));Tài liệu API → Nhận API key miễn phí
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ế.