Tärkein / Uutiset

6 syytä miksi sinun pitäisi käyttää SVG: tä

Skaalautuva vektorigrafiikka (SVG) ovat kuvatyyppejä, joita tuetaan yleisesti kaikissa työpöytä- ja mobiiliselaimissa. Hyödyt niiden käytöstä web- ja sovellussuunnitteluun ovat valtavat - kerro meille kuusi suurinta syytä.

01. Se on resoluutiosta riippumaton ja reagoiva

Kuvia voidaan skaalata samalla tavalla kuin skaalataan kaikki muut elementit reagoiva web-suunnittelu . SVG: n vektoriluonteesta johtuen kuva on resoluutiosta riippumaton. Kuva näyttää terävältä missä tahansa näytössä, uusista älypuhelimista löytyvistä kauniista ~ 285 ppi: n pikselitiheysnäytöistä ~ 85 ppi: n vakiomonitoreihin.

SVG: n avulla voimme lopettaa '@ 2x: n luomisen. png-kuvat (ellei sinun tarvitse tukea IE8: ta) ja luo yksi tiedosto kaikille kuvakkeillemme. SVG-kuvia voidaan myös skaalata samalla tavalla kuin skaalaamme kaikki muut elementit reagoivassa suunnittelussa.

Palkitun Sarah Drasnerin sivusto käyttää hyvällä tavalla SVG: tä

02. Siinä on navigoitava DOM

Selaimen sisällä olevalla SVG: llä on oma DOM. Selain käsittelee SVG: tä erillisenä asiakirjana ja sijoittaa sen sitten sivun normaaliin DOM: iin. Tämä on tärkeää ‘viewBox’ -ominaisuudelle, koska voimme piirtää kuvamme kaiken kokoiselle kankaalle, mutta näyttää sen sitten selaimessa toisessa, kaikki päivittämättä SVG: n ominaisuuksia. Tämä erillinen, navigoitava DOM on myös se, miten olemme vuorovaikutuksessa SVG: n sisäisten elementtien kanssa CSS: n ja JavaScriptin avulla.

03. Se on animoitavissa

SVG: n sisällä olevat elementit voidaan animoida todella hämmästyttävien interaktiivisten kokemusten luomiseksi, tai animaation avulla voidaan lisätä hienoja pieniä kosketuksia käyttöliittymään, kuvaan tai kuvakkeeseen. Animaatio voidaan luoda käyttämällä CSS: ää, Javascriptin Web-animaatioiden sovellusliittymää tai SVG: n ’-Tunniste.

SVG-animaatio on mielenkiintoisessa kehitysvaiheessa. Google hylkäsi SMILin - SVG: n animointitagin - Chrome 45: ssä CSS-animaatioiden ja Web-animaatioiden sovellusliittymän hyväksi, mutta on sittemmin keskeyttänyt poistamisen.

04. Se on tyylikkäitä

Luokkien nimillä tai tunnuksilla voit muotoilla elementtejä SVG: ssä vain käyttämällä hieman erilaisia ominaisuuksia kuin normaalisti; 'värin' sijasta käytetään 'täytettä' ja reunan sijasta 'viivaa'. SVG: n muotoilussa on joitain rajoituksia, jotka johtuvat siitä, miten käytät SVG: tä sivulla.

Jos käytät SVG: tä kuvatunnisteena, et voi tyylittää elementtejä Internet Explorerissa. Siellä on kuitenkin polyfill - svg4everybody - mikä korjaa tämän ongelman.

05. Se on interaktiivinen

JavaScriptin avulla voimme olla vuorovaikutuksessa SVG: n sisällä olevien elementtien kanssa navigoitavan DOM: n ansiosta. Tämä antaa meille mahdollisuuden luoda interaktiivisia elementtejä SVG: llä samalla tavalla kuin HTML ja CSS.

Voimme myös käyttää animaatioita JavaScriptiä käyttämällä uutta Web-animaatioiden sovellusliittymää, joka mahdollistaa sekä yksinkertaisten että monimutkaisten vuorovaikutusten ja animaatioiden ohjelmoinnin. Voimme käyttää myös useita JavaScript-kirjastoja, jotka on luotu SVG-työnkulkujen nopeuttamiseksi.

06. Pienet tiedostokoot

Johtuen SVG: n vektoriluonteesta (koska se on piirretty koordinaatistoista), niiden tiedostokoot optimoituna ovat pienet verrattuna melkein mihin tahansa muuhun kuvatiedostotyyppiin. On olemassa useita tapoja optimoida SVG, komentorivityökaluista pisteiden ja ryhmien manuaaliseen poistamiseen, mutta SVGOMG on graafinen käyttöliittymä ja paljon säätömahdollisuuksia, jotka näyttävät visuaalisesti optimoinnin aikana tehtävät muutokset.

Koska SVG: t voivat olla reagoivia, animoituja ja monimutkaisia, ei ole mitään syytä, ettet pitäisi käyttää niitä suuriin sankarikuviin tai kuviin blogikirjoituksessa tai muussa verkkomediassa.

Suunnittelijat - pysy ajankohtaisina ja tehokkaina

Ei enää riitä olemaan Photoshop-päällikkö. Suunnittelijoiden on kasvatettava taitojaan pysyäkseen tarkoituksenmukaisina ja tehokkaina, mutta mihin kannattaa keskittyä? Pitäisikö suunnittelijoiden oppia koodaamaan, ja jos on, voiko rajoitettu kooditieto todella vaikuttaa lahjakkaiden insinöörien kanssa työskentelyyn? Kuinka suunnittelijat sopivat ketteriin työnkulkuihin? Onko projektimenetelmillä edes väliä? Mikä rooli suunnittelijalla on suunnittelujärjestelmien luomisessa, käytössä ja ylläpidossa?

Erittäin ystävällinen johtaja Dan Mall jakaa tarinoita ja näkökulmia vastaamaan näihin kysymyksiin ja muuhun puheessaan Luo New York 25.-27. Huhtikuuta 2018 .

Hanki lippusi nyt

Tämä artikkeli ilmestyi alun perin Web Designer -lehden numerossa 267, luovassa lehdessä, joka tarjoaa asiantuntijaopastuksia, uusimpia ominaisuuksia ja välttämättömiä resursseja. Tilaa tänään.

Aiheeseen liittyvät artikkelit: