Share
Som webdesigner er det på tide at du visste hvordan du implementerer SVG (Scalable Vector Graphics) i nettstedene dine. La oss nå se på grunnlaget for SVG, så vel som mer komplekse design som logoer eller ikoner.
Nylig på WWDC 2012 annonserte Apple utgivelsen av den nye retina-skjermen MacBook Pro. Retina-skjermer har en høyere pixeldensitet (220.5ppi) enn den for vanlige skjermer eller skjermer, og Apple hevder at deres penneleddens tetthetsteknologi er så høy at øyet ikke klarer å merke pikselementet ved en typisk visningsavstand. Hvis du har sett en netthinnen på førstehånds så er jeg sikker på at du er enig i at de ser fantastiske ut. Imidlertid kan disse retina-skjermbildene begynne å forårsake problemer for oss webdesignere.
Problemet oppstår når bilder som tidligere ble lagret som 72ppi, begynner å bli forvrengt på netthinnen. Løsningen på dette problemet er fortsatt ikke 100% løs, og designere ser på nye måter å prøve å løse om dette problemet.
En mulig løsning (i noen tilfeller) er å bruke SVG. Hvorfor vil du bruke SVG? SVG er gjengitt som vektorer og kan derfor skalere til hvilken skjermoppløsning vi ser dem på, samtidig som vi opprettholder skarpheten og krystallkvaliteten som vi tenkte da vi først utformet dem.
Dette løser ikke alle problemer; Vi kan ikke bruke SVG til å lage pikselbaserte bilder som .jpg eller png (men for det kan vi alltid bruke lerretet). Når det kommer til ting som illustrert ikoner eller logoer, viser SVG seg ekstremt nyttig. I dag skal jeg vise deg grunnleggende om å bruke SVG, samt å demonstrere hvordan du kan ta vektorer du har designet i Adobe Illustrator, og implementer dem på dine nettsteder med letthet.
Før vi hopper inn, skal jeg gi deg en rask oversikt over SVG:
La oss starte enkle. Vi lager en linje. Vi gjør dette ved å legge til følgende kode i et HTML-dokument.
For det første bruker vi svg-taggen og deretter inne i det legger vi til xml-oppslaget. Her er hva vi definerer:
Så hvis vi for eksempel ville lage en diagonal linje, kunne vi sette y2-attributtet til 200, og dette ville bringe sluttpunktet til linjen ned med 200, og dermed skape en diagonal linje. Vi kan også bruke noen stiler til dette, og vi gjør det med CSS. Her har vi brukt noen inline stiler, men du kan bruke dem i et eksternt stilark hvis du ønsker det.
Sirkler kan opprettes på samme måte som en linje, med unntak av noen få attributter. Her skal vi lage en sølvcirkel, med en svart ramme og en radius på 50.
Cx- og Cy-attributter er de der vi kan sette x- og y-koordinatene til midten av sirkelen. Hvis vi savnet disse egenskapene, ble sirkelens senter satt til '0', noe som ville føre til at sirkelen ble kuttet av siden. Til slutt angir attributten merket 'r' radiusen til sirkelen.
Som du kan se nå, er det ganske enkelt å lage figurer med SVG. Å lage et rektangel er ikke noe unntak.
På samme måte som å sette bredde og høyde på et element i CSS gjør vi det samme, men bruker svg 'rect' attributter.
Ellipse fungerer på nesten samme måte som å lage en sirkel, men denne gangen i stedet for bare å ha en fast radius, har vi separate attributter for x- og y-radiusen.
Polygoner blir litt vanskeligere (men bare litt). Vi starter med å gi polygonen en fyllfarge, et oransje og en strekkbredde på 10. Vi overfører deretter punktattributtene til den. Hvert par koordinater definerer x- og y-koordinaten til hvert hjørnepunkt av polygonen. I denne demonstrasjonen har jeg laget en stjerne.
Som nevnt tidligere er SVG flott fordi når vi inkluderer tekst, kan søkemotorene indeksere det - i motsetning til andre gjengivelsesmotorer som Flash.
Slik legger du til tekst:
webdesigntuts+
I ovennevnte kode kan du se at vi har lagt til x- og y-koordinatene. Sett deretter noen få CSS-stiler som fontfamilien, vekten, størrelsen og fargen.
Innenfor sti-taggen må vi konsentrere seg om "d" -attributtet. Dette d-attributtet beskriver banen som skal opprettes. Hver kommando i d-attributtet er en av kommandobrevene nedenfor, etterfulgt av parametrene. Kommandoene for d-attributtet er som følger:
Her er noen eksempler på kode:
Vi kan til og med sette vår tekst ovenfra for å følge den banen som denne:
Vi har i utgangspunktet definert banen i 'defs'-taggen og gitt den et id med' sti1 '. Vi kan da bruke dette til teksten ved hjelp av attributten "textPath".
Nå som vi har dekket grunnleggende om å skape former ved hjelp av SVG, er det på tide å gå videre til noe litt mer komplekst. Heldigvis for oss selv om det ikke må være at komplisert, faktisk er det faktisk veldig enkelt takket være Adobe Illustrator. For de av dere som ikke vet om Illustrator, kan det beskrives som:
Bransjens fremste vektor-tegne-miljø for å skape grafikk som spenner over media.
Åpne Illustrator og opprett din logo eller ikon. De fleste profesjonelle logoer bør ha blitt opprettet ved hjelp av vektorer, slik at du bør kunne få dem fra dine kunder. Hvis ikke, kan du prøve å gjenskape dem selv. Hvis du ikke er kjent med å jobbe i Illustrator, er det et vell av informasjon på Vectortuts+
Når du har logoen eller ikonet ditt, går du til "Fil> Lagre som", og velg deretter "SVG" fra rullegardinmenyen Lagre som type. Gi filen et navn, og klikk deretter "Lagre". SVG-alternativdialogen skal da åpnes. Derfra velger du "Vis SVG-kode". Dette åpner koden i nettleseren. Du trenger bare å kopiere mellom, og inkludert, svg-kodene i HTML-dokumentet ditt, og det er det. Hvor enkelt var det?
Du kan også bruke Illustrator til å lage stier. Tegn bare en linje i Illustrator, ta tak i "d" attributtdataene du kan bruke til en sti som vi tidligere har beskrevet. For eksempel, stien jeg opprettet for "webdesigntuts +" -teksten ovenfor, ble opprettet i Illustrator og deretter eksportert til dokumentet mitt.
Du kan deretter stil eller plassere SVG-taggen i dokumentet ditt ved hjelp av standard CSS-metoder. Du kan også pakke den inn i en ankermerke for å lage en kobling, eller målrett den med JavaScript for å legge til ekstra funksjonalitet.
Det er nå bare et spørsmål om tid før netthinnen og piksel tettheten er en del av hver enhet og skjerm som vi bruker, og dette vil fortsette å bli presset fremover med større tetthet i fremtiden. Ved å bruke SVG kan vi lage skalerbar grafikk som vil gjøre krystallklar og vil være klar for fremtiden som skjermoppløsninger blir høyere. Selvfølgelig er SVG ikke praktiske i alle situasjoner, men for vektorbaserte illustrasjoner på nettet er det absolutt den beste veien fremover.
Accentsconagua