Aloittaminen SVG: llä
Viimeisten kuukausien aikana SVG-kuvien ympärillä oleva vilinä on kasvanut ja kasvanut. SVG on ollut jo vuosia, mutta vasta äskettäin se alkoi näyttää todelliselta kilpailijalta.
SVG: n ympäröimä hype ei ole vain muutamia hipstereiden trendi, SVG ratkaisee kokonaan ongelmat, joita JPG: n tiedostomuodot eivät täysin käsittele.
Jos haluat aloittaa SVG: n käytön, tämä artikkeli on sinua varten. Opastan sinua hankkimaan SVG: n Illustratorista HTML: ksi ja sitten opettamaan sinua muuttamaan kuvaa CSS: llä.
Ennen kuin aloitamme, katsokaa demo Olen koonnut, tämä on se, mitä me rakennamme.
Mikä on SVG?
SVG tarkoittaa Scaleable Vector Graphicsia, ja ensimmäinen sana antaa sinulle vihjeen siitä, miksi SVG on niin suosittu. SVG on täydellinen vastapaino herkälle suunnittelulle.
SVG-kuvat ovat ytimekkäästi XML-pohjainen vektorikuvan muoto 2D-grafiikalle.
SVG-spesifikaatio on W3C: n vuonna 1999 kehittämä avoin standardi, joten voit nähdä, että se on ollut tekniikan kymmenen ja puoli vuotta - web-termien käyttöiän ajan.
Miksi minun pitäisi käyttää SVG: tä?
Työnkulku ja tehokkuus ovat liian arvokkaita heittää pois hymy. Jos aiot siirtyä JPG: stä tai PNG: stä SVG: ään, tarvitset päteviä syitä, onneksi SVG tarjoaa paljon:
- SVG on yleensä pienempi kuin bittikartat, kuten JPG ja PNG, eli ne käyttävät vähemmän verkkotilaa ja lataavat nopeammin.
- SVG-kuvat ovat skaalautuvia, ne näyttävät hyvältä riippumatta siitä, millaista kokoa käytät niitä, ja se on loistava verkkokalvonäytöille.
- SVG tekee reaaliaikaisen kuvan kiertämiskoulutuksen tarjoamalla yhden kokoisen ratkaisun kaikkiin ratkaisuihin.
- SVG sopii mainiosti tasainen muotoilu suuntaus, joka on tällä hetkellä niin suosittu.
- Koska SVG on pohjimmiltaan XML, sitä voidaan hallita CSS: llä ja JavaScriptillä, ja se tarjoaa runsaasti vuorovaikutteisia mahdollisuuksia.
- SVG ei vaadi HTTP-pyyntöjä;
SVG on osa dokumentin lähdekoodia ja on jo saatavilla.
SVG on uskomattoman hyödyllinen tekniikka, ja se on mysteeri moneen, miksi se ei ole siirtynyt täydellisemmäksi.
Illustratorista verkkoon
Useita sovelluksia, jotka tuottavat SVG: n, voit käyttää niitä. Oma suosikki on Adobe Illustrator, joten käytämme sitä.
Olen juuri heittänyt yhteen muotoja ja tekstiä SVG: lle:
Kuten näette, se on hyvin yksinkertainen kuva, jotta voimme selvästi nähdä, mitä koodissa tapahtuu.
Seuraava askel on tallentaa se SVG: ksi. Joten valitse Tiedosto> Tallenna nimellä.
Näet tavallisen ponnahdusikkunan, ja tässä sinun on valittava SVG-muoto; heti kun tämä pop-up tulee näkyviin:
Tämä vuoropuhelu tarjoaa meille kaksi vaihtoehtoa:
Vaihtoehto 1: Tallenna kuva
Ensimmäinen vaihtoehto meillä on klikata OK ponnahdusikkunassa ja tallentaa kuva vain .svg-kuvaksi ja lisätä se HTML-muotoon, koska olisimme bittikarttakuva:
Tämä on täysin hieno, ja kuva on vielä asteikolla, jos haluat sen, mutta koska tämä vaihtoehto on upotettu tiedosto, meillä ei ole editointikykyä sivun lähdekoodissa.
Vaihtoehto 2: SVG-koodi ...
Toinen vaihtoehto on käyttää suoraan kuvan koodia napsauttamalla SVG-koodia ... -painiketta. Sen jälkeen voit kopioida sen ja liittää sen HTML-muotoon.
Tunnus saatiin:
Tämä on suositeltava lähestymistapa, koska se antaa meille mahdollisuuden manipuloida kuvaa CSS: llä.
Kuten näette, koodi on yksinkertainen XML ja sen seurauksena se on todennäköisesti kohtuullisen tuttu kaikille Webissä työskenteleville. Tämä perehtyneisyys on suuri etu työskennellessä SVG: n kanssa.
Näet myös, että XML-elementeissä on useita määritteitä, yksityiskohtaisia värejä ja kantoja; nämä ovat arvoja, joita käsitellään myöhemmin.
Koodin puhdistaminen
Jos olet perehtynyt XML-muotoon (älä huoli, jos et ole), huomaat, että Illustratorin tuottamat koodit ovat melko sotkuisia. Tämä johtuu siitä, että se on lisännyt XML: n esitystapojen CSS-ominaisuuksia, paheksuttaen sen.
Joten seuraava tehtävä on siirtää esitysnäkökohdat CSS: ään, johon ne kuuluvat.
Voimme nähdä, että kaikilla muotoillamme on täyttöväri, ja se on yksi ominaisuuksista, joita voimme helposti siirtyä CSS: ään. Tällöin tarvitsemme vain XML-XML: n täyttömääritteen ja -arvon ja käytämme yksinkertaista valitsinta määrittääksesi haluamamme värin täyttöominaisuudella:
rect {fill: #AD6F6F;}circle {fill: #6F9FAA;}polyline {fill: #6FA86F;}Seuraavaksi voimme nähdä, että tekstissämme suurin osa ominaisuuksista voidaan siirtää myös CSS: ään. Poista XML -tiedostosta täyttö, fonttiperhe ja kirjasinkoko ja lisää ne CSS: ään:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;} Katsotaan nyt koodimme nyt:
Näet, että poistamalla esitysominaisuudet meillä on paljon helpommin luettavia koodeja.
Ottakaa se loveen
Olemme siirtäneet XML-XML-esitysominaisuutemme CSS: ään, mutta ne olivat ominaisuuksia, joita meillä jo oli. Voimme myös lisätä uusia ominaisuuksia.
Ensimmäinen asia, jonka haluan tehdä, on lisätä aivohalvaus ensimmäiselle ympyrällemme, mutta ei vain sitä, haluan hallita paksuutta ja opasiteettia. Kaikki on hyvin yksinkertaista:
circle {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Jos tarkistat tiedostosi, näet, että tämä todellakin lisää ympyrän aivohalvauksen, mutta lisää sen myös toiseen ympyrään, jota emme halunneet.
Ratkaisu on täsmälleen sama kuin mikä tahansa CSS-valintaongelma, meidän on vain lisättävä luokka XML-elementtiin:
Ja sitten voimme kohdistaa luokan CSS: ään:
circle.stroke {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Lähes jokainen CSS voidaan soveltaa SVG: ään. Voimme käyttää hover-tehostetta, joka lisää fonttikokoa esimerkiksi:
text:hover {font-size: 40px;}Jos testaat tämän, näet, että se toimii, mutta se on hetkessä vastaus. Olisi paljon parempi, jos käytit CSS-siirtymää, joka on tietysti mahdollista:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;transition: all 1s ease;}Jos lataat sivun uudelleen, näet hellävaraisen siirtymän fonttikokoon.
johtopäätös
Kuten näette, SVG: lla on paljon valtaa sen takana. Oppimiskäyrä on hyvin matala ja mahdollisuudet tuntuvat loputtomilta. Yksi SVG-kuva on kymmeniä bittikarttakuvia.
Esitetty kuva / pikkukuva, skaalautuva kuvio kautta Shutterstock.