D'Magie vum SVG - UX-REPUBLIK

SVG d'Zukunft vum Webbild?

NB: SVG ass e Vektorbildformat, et gëtt allgemeng fir Illustratiounen, Logoen, etc. Awer et gëtt wéineg, wann iwwerhaapt, Interessi fir verschidden Aarte vu Biller (Fotoen, etc.).
Wéi eng Webdesigner huet dës grouss Debatt net schonn: "ass SVG d'Bildformat vun der Zukunft vum Web"? Mat Multi-Device Themen schéngen Vecteure Biller de Panacea ze sinn. Onendlech resizable, ee Bild ass genuch fir all Zorte vu Schiirme.
Wéi och ëmmer, Kritiker vum SVG hunn e staarkt Argument. SVG ka schwéier sinn ... Ech mengen dës Behaaptung verdéngt Enquête.

Zréck op d'Notioun vum Gewiicht vun engem Bild

D'Digitaliséierung vun de Biller, déi sech an den 80er Joren entwéckelt huet, huet zu zwou ënnerschiddlech Techniken entstanen. Et existéiert:

Raster Biller,
Dsinn Vecteure Biller.

Raster Biller

Raster Biller (Bitmap) besteet aus der Assemblée vu Pixelen (d'Basis Eenheet déi benotzt gëtt fir d'Definitioun vun engem Raster digital Bild ze moossen. Säin Numm kënnt vum englesche Saz Bildelement, wat fir Bildelement steet).
E Bild gëtt duerch eng Matrix vu Pixel representéiert. E Pixel gëtt duerch seng Faarf duergestallt, kodéiert duerch d'Zuel vu Bits.
1 Bit: 2 Faarwen (schwaarz a wäiss)
4 Bits: 16 Faarwen (oder Niveauen vu gro) méiglech
8 Bits (1 Byte): 256 méiglech
24 Bits (3 Bytes): 16 Millioune méiglech
An 1 kilobyte ( ko ) = 1 Bytes
D'Gewiicht vun engem Rasterbild hänkt also vu senger Unzuel u Pixelen of, wat selwer vun der Unzuel u benotzte Faarwen hänkt.

Vector Biller

Vektorbilder besteet aus der Beschreiwung vun de konstituéierten Elementer (einfach geometresch Figuren, Linnesegmenter, Bézier-Kéiren, asw.), Hir Faarf an hir Plaz.
D'Gréisst vun engem SVG Bild hänkt vu senger Komplexitéit of. D'Koordinaten, Dimensiounen a Strukture vu Vektorobjekte ginn an numeresch Form an XML uginn.
E spezifesche Stilsystem (CSS oder XSL) mécht et méiglech d'Faarwen a Schrëften unzeweisen, déi benotzt ginn. Dëst Format ënnerstëtzt e puer grondleeënd geometresch Formen (Rektangelen, Ellipsen, etc.), awer och Weeër (Weeër), déi Bézier Kéiren benotzen an domat et méiglech maachen bal all Form ze kréien. Fëllung kann mat Gradienten gemaach ginn (opgedeelt) Musterfarben (Muster) déi all SVG Objekter oder Filtere sinn. Dir kënnt och Mustere laanscht d'Weeër uwenden (lues) a benotzt Fëllfunktiounen. Den Alpha-Kanal, fir Transparenz, gëtt op all Niveau geréiert.

Wat méi Informatioun et gëtt, wat d'Bild méi schwéier ass.
(Keng Panik, net néideg ze codéieren fir SVG ze maachen, Dir kënnt d'Bild an svg direkt vum Illustrator exportéieren).

Firwat ass e schwéiert Bild schlecht?

Heaviness verlängert d'Laaschtzäit vun enger Säit. Zouzeginn, haut verbreet d'Faser an dës Zort vu Problem entsteet manner, ausser datt ... Smartphones sinn och Legion an 3G bréngt dëse Luedeproblem zréck andeems se et accentuéieren. Wéi ee vu menge Kollege géif soen:

schwéier Bild = Bild dat laang dauert fir ze lueden, dofir op 3G Verbindung => et ass deier an et gëtt net ugewisen. Op enger anerer Verbindung => e Browser mécht net méi wéi 2 Ufroen parallel zum selwechte Server, mat 4 schwéiere Biller, musst Dir waarden bis déi éischt 2 voll gelueden sinn fir déi folgend ze lueden ...

Et ass also net méi nëtzlech fir Iech ze beweisen datt d'Liichtegkeet besser ass (wat d'Biller natierlech ugeet!).

Plaz fir ze testen

Mir wäerten d'Evolutioun vun engem Bild verfollegen, lues a lues méi komplex ginn fir säi Gewiicht tëscht dem png an dem svg ze vergläichen. Ech benotzen dann ImageOptim (https://imageoptim.com/fr.html) fir d'Gréisst vun de png Biller ze reduzéieren (PNG optimiséiert). Ech kompriméieren dann mäi SVG (SVGZ Format).

1 - Basis Bild

2 - Bild mat verschiddene Formen

3 - Füügt e Gradient Hannergrond

4 - Füügt eng komplex Form (d'Streifen)

5 - Drop Shadows addéieren

6 - Endlech exportéieren ech dat lescht Bild a png andeems ech 1200 px an der Breet setzen. De SVG ass vektoriell, et hält datselwecht Gewiicht egal wéi eng Plaz et um Écran vum Internet Benotzer besetzt, dëst ass net de Fall vun der png.

	PNG	PNG optimiséiert	SVG	SVGZ
1	4 Ko	3 Ko	4 Ko	2 Ko
2	8 Ko	4 Ko	12 Ko	4 Ko
3	29 Ko	20 Ko	13 Ko	4 Ko
4	87 Ko	77 Ko	33 Ko	8 Ko
5	96 Ko	89 Ko	34 Ko	8 Ko
6	219 Ko	196 Ko	34 Ko	8 Ko

Mäi Experiment huet den Defekt fir e spezifesche Fall ze sinn, et huet keen universellen Charakter. Et beweist trotzdem datt SVG net onbedéngt méi schwéier ass wéi PNG ... Wierklech net (op der anerer Säit, Dir musst e puer grondleeënd [intuitiv] Reegele respektéieren, sou wéi verstoppt Objekter net hannerloossen, am léifsten Vektorformen benotzen ...).

Dir fannt d'Quelle vu menger Erfahrung andeems Dir dëse Link follegt: https://github.com/apdr/The-Magic-of-SVG.

Méi gewuer ginn

Vum Anne Pedro

UX-ACTIVIST bei UX-REPUBLIC

Keng Eventer fonnt!