./prontouso.com

TIỆN ÍCH THIẾT KẾ

Chuyển Đổi SVG sang Data URI

Mã hóa mã nguồn SVG thành chuỗi URL mã hóa hoặc Base64 Data URI để nhúng trực tiếp vào tệp CSS, HTML hoặc JavaScript mà không cần tệp ảnh rời.

Trạng thái công cụChạy trên trình duyệt của bạn
Xem trước

Convert SVG markup to a CSS/HTML-safe data URI and back.

Cách thức hoạt động

  1. Nhập dữ liệu của bạn

    Điền các giá trị cần thiết, dán văn bản hoặc tải lên tệp bạn muốn xử lý.

  2. Xem kết quả tức thì

    Hầu hết các công cụ cập nhật theo thời gian thực khi bạn nhập liệu; một số công cụ sử dụng một nút hành động duy nhất.

  3. Sử dụng kết quả

    Sao chép, tải xuống hoặc chia sẻ kết quả được tạo — bạn luôn có toàn quyền kiểm soát dữ liệu của mình.

Quyền riêng tư & xử lý dữ liệu — Chạy cục bộ 100% trên trình duyệt của bạn. Công cụ này không tải dữ liệu của bạn lên máy chủ.

Chuyển Đổi SVG sang Data URI là gì?

Encode SVG markup into a Data URI for CSS or HTML, or decode an existing SVG Data URI back to markup.

TÌM HIỂU CÁCH HOẠT ĐỘNG CỦA CÔNG CỤ

How to convert SVG to a Data URI

What it is for

SVG Data URIs are useful for small inline icons, CSS backgrounds, and compact prototypes.

Two-way conversion

  • Paste SVG markup to encode it.
  • Paste an SVG Data URI to decode it.
  • Copy the result for CSS or HTML.

Keep it small

Data URIs work best for small SVGs. Large illustrations are usually easier to maintain as separate files.

Data URI example

Inline a small SVG

A valid SVG starts with an svg element, comments are removed, and the remaining markup is percent-encoded after the data:image/svg+xml prefix.

<svg viewBox="0 0 10 10"> -> data:image/svg+xml,%3Csvg...

Data URI notes

Data URIs are convenient for small SVGs. Once the encoded string gets long, a separate .svg file is usually easier to cache, read, and maintain.

Các Câu Hỏi Thường Gặp (FAQ)

Can I use the result in CSS?

Yes. The encoded output is ready for CSS url(...) usage or HTML attributes.

Does it sanitize SVG?

No. It converts text only, so review SVGs from untrusted sources before using them.

Can it decode any Data URI?

It is focused on SVG Data URIs, not arbitrary file formats.

Does it minify the SVG?

Only comments and outer whitespace are removed. Internal text spacing is preserved so the SVG does not change visually.

Công Cụ Liên Quan