04: Miksi SVG? Pieni. - CSS-temppuja

Anonim

SVG-tiedoston koko riippuu sen monimutkaisuudesta, ei siitä, kuinka “suuri” se on. Muista, että SVG: t eivät todellakaan välitä siitä, missä koossa ne renderöidään, ne ovat joustavia ja teräviä riippumatta siitä.

Kuvittele 100 × 100 pikselin rasterikuva. Se on 10000 pikseliä tietoa. SVG on vain ohjeet kuinka piirtää jotain, joten jos nuo ohjeet ovat riittävän yksinkertaisia, ne voivat olla melko pienempiä kuin tietojen tallentaminen kuhunkin pikseliin. Se on hieman monimutkaisempi kuin se, koska pakkaus tulee pelaamaan molemmilta puolilta, mutta että yleinen idea on olemassa.

Se ei kuitenkaan ole niin yksinkertaista kuin "SVG on pienempi" - ja ei ole määritettyä kaavaa sen määrittämiseksi, mikä muoto on aina oikea. Joskus se on hyvin ilmeistä. Kiinteä muoto Apple-logosta? Vektori on pienempi melkein missä tahansa koossa. Kuva tammipuusta, jossa on paljon lehtiä? Vektori voi olla liian monimutkainen ja rasterikuvan muoto pienempi.

Kuva Todd Parkerin esityksestä.

Sinun on ehkä vain tallennettava kopio molempiin suuntiin, optimoitava molemmat ja testattava tiedostokoko.

SVG on tyypillisesti loistava esimerkiksi:

  • Logot
  • Kuvakkeet
  • Yksinkertaisia ​​piirroksia
  • Kaaviot
  • Kartat

Vedon vetoa, että sinulla on jo melko hyvä intuitio siitä, millainen grafiikka on järkevää olla vektori.

Tiedostot

  • 04-icon_62532.png.webp
  • 04-icon_62532.svg