Zašto stvarati SVG slike za web stranice

Iako je ovo izvorno bila SVG grafika, naš upravitelj sadržaja ne podržava format pa je pretvoren u PNG

U našem artículo prednji Vidjeli smo kako koristiti besplatni softver za uključivanje slika u WebP format. Sada ćemo vidjeti zašto stvarati SVG slike za web stranice.

Jedan od velikih izazova s ​​kojima se susreću web dizajneri je broj uređaja s kojima se ljudi spajaju na mrežu. U onim slučajevima kada je slika samo ilustrativna, gubitak kvalitete ne utječe mnogo. No, ako je važno za sadržaj kao što je infografika, okvir ili snimka zaslona, ​​morate osigurati da sadržaj izgleda potpuno jednako u bilo kojoj veličini.

Stvorite SVG slike za web stranice

Što su grafike u SVG formatu

Da bismo razumjeli razliku između ove vrste grafike i one koja se obično koristi na web stranicama, moramo objasniti dva koncepta; onu rasterske grafike i onu vektorsku grafiku.

  • Raster grafika: Ova vrsta grafike izgrađena je s pikselima raspoređenim u mrežu. Svakom pikselu je dodijeljena određena boja. Kvaliteta se temelji na razlučivosti koja je određena brojem piksela po inču. Kako se veličina povećava, gustoća piksela se smanjuje, što utječe na kvalitetu slike. To znači da su za predstavljanje složenih slika s mnogo detalja, poput fotografije, potrebne vrlo velike datoteke određene veličine.
  • Vektorska grafika: Građeni su od geometrijskih objekata izraženih matematičkim formulama. Ti objekti mogu biti linije, oblici i krivulje. Budući da su izraženi matematičkim formulama, njihova se veličina može mijenjati bez gubitka kvalitete i oštrine, točno prikazujući detalje.

Rasterska grafika je najprikladnija za vrlo složene slike kao što su fotografije ili koji uključuju nježno sjenčanje boja i gradijente. Za njihovo uređivanje potreban im je specijalizirani softver za uređivanje fotografija poput Gimpa.

Sa svoje strane, Vektorska grafika najbolja je za ilustracije, ikone i logotipe. Iako postoje programi za uređivanje kao što je Inkscape, oni se također mogu stvarati i uređivati ​​pisanjem teksta.

Grafika u SVG formatu (skalabilna vektorska grafika) Uglavnom se koriste na web stranicama i imaju ove karakteristike:

  • Na njih rezolucija ne utječe:  Grafika u SVG formatu izgleda jednako oštro na bilo kojoj veličini zaslona, ​​uključujući one koji koriste tehnologiju vrlo visoke rezolucije.
  • Oni su vektorska grafika: Kao što smo već objasnili, ova vrsta grafike temelji se na predstavljanju geometrijskih objekata izgrađenih od matematičkih formula. Promjena veličine jednostavno primjenjuje formulu na nove vrijednosti.
  • manje veličine: SVG format ne treba spremati informacije za svaki piksel. Matematičke formule za njihovu konstrukciju pohranjuju se u tekstualnu datoteku u komprimiranom XML formatu.
  • Izdanje: Kao i sva vektorska grafika, SVG format se može modificirati posebnim softverom ili uređivačem teksta.
  • Interaktivnost: Ove vrste grafike mogu se animirati ili napraviti da odgovaraju korisničkim uputama pomoću CSS ili Javascript koda.
  • kompatibilnost: Većina uređaja ima preglednike koji podržavaju ovaj grafički format.

Rekli smo da se SVG grafika može stvoriti pomoću uređivača teksta. Otvorite uređivač teksta svoje distribucije i zalijepite sljedeći kod:

<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>

Sada ga spremite pod nazivom circle.svg. Ako pogledate u svoj upravitelj datoteka, vidjet ćete sličicu zelenog kruga, a ako ga otvorite u pregledniku slika, vidjet ćete ga u punoj veličini.

gdje je:

<svg width="200" height="200">

Postavite širinu i visinu na 200 piksela.

<rect width="100%" height="100%" fill="white" />

Određuje da će pozadina biti bijeli kvadrat koji će zauzimati cijelu širinu i visinu slike.
<circle cx="50%" cy="50%" r="50" fill="green" />

Postavite krug u sredinu slike, dodijelite mu radijus od 50 piksela i označite da će boja biti zelena.

<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>

Stavite riječ Ubunlog u točnom središtu kruga.

U budućem članku ćemo vidjeti grafičke uređivače za ovaj format.


Ostavite svoj komentar

Vaša email adresa neće biti objavljen. Obavezna polja su označena s *

*

*

  1. Za podatke odgovoran: Miguel Ángel Gatón
  2. Svrha podataka: Kontrola neželjene pošte, upravljanje komentarima.
  3. Legitimacija: Vaš pristanak
  4. Komunikacija podataka: Podaci se neće dostavljati trećim stranama, osim po zakonskoj obvezi.
  5. Pohrana podataka: Baza podataka koju hostira Occentus Networks (EU)
  6. Prava: U bilo kojem trenutku možete ograničiti, oporaviti i izbrisati svoje podatke.