La profitoj uzi Scalable Vector Graphics
Scalable Vector Graphics, aŭ SVG, ludas gravan rolon en retejo-dezajno hodiaŭ. Se vi nun ne uzas SVG en via retejo, ĉi tie estas kelkaj kialoj, kial vi devas komenci fari ĝin, kaj ankaŭ malŝparojn, kiujn vi povas uzi por malnovaj foliumiloj, kiuj ne subtenas ĉi tiujn dosierojn.
Rezolucio
La plej granda profito de SVG estas rezolucia sendependeco. Ĉar SVG-dosieroj estas vektoraj grafikaĵoj anstataŭ rastrumaj rastraj bildoj, ili povas esti ŝanĝitaj sen perdi ajnan bildan kvaliton. Ĉi tio estas speciale helpema kiam vi kreas respondemajn retejojn, kiuj bezonas aspekti bone kaj funkcii bone tra ampleksa gamo de ekranecimoj kaj aparatoj .
SVG-dosieroj povas esti grimpi aŭ malsupren por akomodi la ŝanĝiĝantan grandecon kaj aranĝajn bezonojn de via respondema retejo kaj vi ne bezonas zorgi pri tiuj grafikaĵoj, kiuj kompromitis kvaliton de iu ajn paŝo de la vojo.
Dosiera Grandeco
Unu el la defioj kun uzado de raster-bildoj (JPG, PNG, GIF) en respondemaj retejoj estas la grandeco de la dosieroj de tiuj bildoj. Ĉar raster-bildoj ne skalpas la vojon, kiun la vektoroj faras, vi devas liveri viajn bildojn bazitajn per pikseloj ĉe la plej granda grandeco, ĉe kiu ili estos montritaj. Ĉi tio estas ĉar vi ĉiam povas fari bildon pli malgrandan kaj konservi ĝian kvaliton, sed la sama ne estas vera por fari bildojn pli grandajn. La rezulto fino estas, ke vi ofte havas bildojn multe pli grandajn ol ili montras sur la ekrano de persono, kio signifas, ke ili senĉese estas devigitaj elŝuti tre grandan dosieron.
SVG adresas ĉi tiun defion. Ĉar la vektoraj grafikaĵoj estas skaleblaj, vi povas havi tre malgrandajn dosierojn, sendepende de kiom grandaj tiuj bildoj eble devas esti montritaj. Ĉi tio finfine havos pozitivan efikon sur la ĝenerala agado de la retejo kaj rapido de elŝuto.
CSS Stilo
SVG-kodo ankaŭ povas esti aldonita rekte al la HTML de paĝo. Ĉi tio estas konata kiel "inline SVG." Unu el la avantaĝoj de uzanta inline SVG estas, ke la grafikaĵoj vere efektivigas la retumilon bazitan sur via kodo, ne necesas fari HTTP-peton por serĉi bildan dosieron. Alia avantaĝo estas, ke inline SVG povas esti stiligita kun CSS.
Ĉu vi bezonas ŝanĝi la koloron de SVG-ikono? Anstataŭ necese malfermi tiun bildon en ia redaktado de programaro kaj eksporti kaj alŝuti la dosieron denove, vi povas simple ŝanĝi la SVG-dosieron per kelkaj linioj de CSS.
Vi ankaŭ povas uzi aliajn CSS-stilojn en SVG-grafikaĵoj por ŝanĝi ilin sur ŝvebaj ŝtatoj aŭ por certaj dezajnoj. Vi povas eĉ animi tiujn grafikojn por aldoni iom da movado kaj interagado al paĝo.
Kuraĝigoj
Ĉar inline SVG-dosieroj povas esti stilitaj per CSS, vi povas uzi CSS-kuraĝigojn ankaŭ al ili. CSS-transformoj kaj transiroj estas du facilaj manieroj por aldoni iun vivon al SVG-dosieroj. Vi povas akiri riĉajn Flash-spertojn sur paĝo sen perei al la malsupreniroj, kiuj venas uzante Flash en retejoj hodiaŭ.
Uzoj de SVG
Kiel potenca kiel SVG estas, ĉi tiuj grafikoj ne povas anstataŭigi ĉiun alian formatan bildon, kiun vi uzas en via retejo. Fotoj, kiuj postulas profundan koloron, ankoraŭ bezonos esti JPG aŭ eble PNG-dosiero, sed simplaj bildoj kiel ikonoj estas perfekte taŭgaj por esti ekzekutitaj kiel SVG.
SVG ankaŭ povas esti taŭga por pli kompleksaj ilustradoj, kiel firmao-logos aŭ grafikaĵoj kaj leteroj. Ĉiuj grafikoj profitos de esti skaleblaj, kapablaj esti stiligitaj kun CSS, kaj la aliaj avantaĝoj listigitaj en ĉi tiu artikolo.
Subteno por Malnovaj Foliumiloj
Nuna subteno por SVG estas tre bona en modernaj retumiloj. La solaj retumiloj, kiuj vere malhavas de subteno por ĉi tiuj grafikoj, estas pli malnovaj versioj de Interreto Explorer (Versio 8 kaj sube) kaj kelkaj pli malnovaj versioj de Android. Ĝenerale, tre malgranda procento de la populara foliumado ankoraŭ uzas ĉi tiujn retumilojn, kaj tiu nombro daŭre plifortigas. Ĉi tio signifas ke SVG povas esti uzata bele sekure en retejoj hodiaŭ.
Se vi volas redoni SVG, vi povas uzi ilon kiel Grumpicon de la Filamento-Grupo. Ĉi tiu rimedo prenos viajn SVG-bildajn dosierojn kaj kreos punktojn de PNG por malnovaj foliumiloj.
Redaktita de Jeremy Girard la 1/27/17