Working with filesWhere it goes and in what format · 6 min read

The vector is text

An .svg file — the web's vector format — is a plain text file, just like a .txt. You can open it with Notepad and read the instructions.

And that changes who can edit it.

What the file says

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="42"
          fill="#1A6B51"/>
  <text x="50" y="63"
        text-anchor="middle"
        font-size="42"
        fill="white">OK</text>
</svg>

What you see

OK
Color
Text
Radius
Each button changes ONE word or ONE number in the file. The drawing is rebuilt whole, sharp, instantly.

That is what you just did with the buttons: changing the color was one word, enlarging the circle was one number, changing the text was two letters.

Nothing was redone by hand, nothing degraded, and the code shows exactly what was touched.

The same logo as a .png is a wall of pixels. To change its color you have to generate the image again, whole, and hope it comes out like the last one.

It is the same "text or binary" rule applied to images: text gets edited, binary gets replaced.

A client asks for the logo in another color. You have the .svg and the .png. Which do you use?

A logo in SVG is a file you can work with. The same logo in PNG is a photo of a logo.

snack 5 of 6 · Which extension for what

Powered by KlugerByte