Den komplette guide til SVG

Side 6 af 6: Kraften fra sprites

Kraften fra sprites

SVG giver os mulighed for at oprette ikoner i et filformat, der er uafhængig af opløsning, hvilket er fantastisk, men på grund af begrænsningerne i HTTP-protokollen ønsker vi ikke at lave en ny filanmodning for hvert ikon på vores websted. Dette vil snart ændre sig med HTTP / 2-protokollen.

hvordan man tegner ansigter i forskellige vinkler

For at undgå at skulle stille en separat anmodning om hvert ikon kan vi gå tilbage til vores gamle ven sprite, undtagen denne gang i SVG. For at oprette en sprite i SVG bruger vi tag og anvend et ID til senere henvisning og viewBox attribut til definition af lærredstørrelse. Inde i symbolikonet opretter vi vores figurer, tekst og andre elementer, der udgør vores ikon.

Inde i symbolmærket kan vi også tilføje yderligere elementer for tilgængelighed, f.eks og tags. Vi opretter vores ikoner inde i en tag for at definere dem til senere brug og for at sikre, at de ikke sendes ud på siden.



Der er en række måder, du kan oprette sprites i SVG. De kan oprettes ved hjælp af vektorsoftware - såsom Adobe Illustrator CC eller skitse - ved blot at placere ikonerne på et kunstkort og eksportere filen som en SVG. Koden, de producerer, skal dog redigeres for at kunne bruges som et ikon-system. En anden måde er at oprette et ikonsystem manuelt. Dette er ikke så svært, og du har fuld kontrol over markeringen. SVG-sprites kan også inkorporeres i build-systemer som gulp eller grunt, hvorved du vælger en mappe, der indeholder SVG-filer og konfigurerer build'en til at udsende en enkelt SVG-sprite.

Når vi har oprettet eller genereret vores SVG-sprite, er der et par måder, vi kan bruge det på. Vi kunne kopiere indholdet af filen og placere den øverst på vores side - dette kaldes inlining. Alternativt, hvis vi bruger php, kunne vi bruge file_get_contents () funktion til at inkludere filen globalt. Den eneste ulempe er, at filen ikke cachelagres, fordi den behandles som kode af browseren og ikke som et billede.

Sådan oprettes en SVG-sprite

01. Opret rammen

Til denne vejledning placerer vi SVG inde i selve webstedet, men vi ser, hvordan det fungerer ved hjælp af filen eksternt. Grundkoden kræver et SVG-tag og det tomme tag.

hvordan man forbereder sig på kunstskolen

02. Opret vores symbol

Inde i tag opretter vi vores første ikon ved hjælp af symbolmærket, vi skal give ikonet ID og viewBox egenskaber. Inde giver vi en titel og figurer, der udgør vores ikon.

Facebook

03. Gentage

Nu har vi oprettet vores første ikon, vi gør det samme for resten af ​​dem. Sørg for at give et unikt id og inkludere viewBox attribut.

... ...

04. Brug ikonet

Nu har vi defineret alle vores ikoner, vi kan trække dem ud og bruge dem på siden, hvor vi har brug for dem.

For at bruge sprite som en ekstern fil skal vi opdatere brugselementet for at henvise til filen og derefter ID'et.

05. Klassens navne

Vi kan gentage det forrige trin for at sende alle vores ikoner. Hvis vi pakker en tag rundt om ikonet og tilføj klasser til begge og vi kan style vores ikoner med CSS.

06. CSS

Nu har vi vores ikoner, og de har individuelle klassenavne, vi kan anvende forskellige udfyldningsfarver på hvert af vores ikoner.

.icon--facebook { fill: #3b5998; } .icon--twitter { fill: #1da1f2; } .icon--linkedin { fill: #0077b5; }

Denne artikel blev oprindeligt offentliggjort i nummer 267 af webdesignermagasinet. Abonner på Web Designer her .

Relaterede artikler:

hvordan man opretter handlinger i Photoshop
  • 1
  • to
  • 3
  • 4
  • 5
  • 6

Nuværende side: Kraften fra sprites

Forrige side Føj animation til SVG