Quartz 🪬

Scalable Vector Graphics

1 min read

Là một format hình ảnh sử dụng XML. Khi ta kéo giãn hình ảnh, nó sẽ không bị bể như JPEG hoặc PNG do nó có cơ chế scale.

Một SVG cơ bản:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <text x="200" y="250" fill="white">
    Hi! You decoded this!{" "}
  </text>
</svg>

Nó sẽ được render ra như sau:

Hi! You decoded this!{" "}

Để sử dụng như là URL, ta có thể Base64 encode nó:

base64 -i example.svg

Rồi gắn prefix data:image/svg+xml;base64, ở đầu.

Bằng cách này, ta có thể dùng nó như là một URL hoặc thậm chí là xem hình ảnh thông qua address bar của browser.

Resources