Bruke SVG for å forhindre spredning av Coronavirus

Klikk her for demo.

Gå hit for å sjekke bestefarens Rick.

Ansvarsfraskrivelse: Denne applikasjonen er ment å fremme den eneste vanen å unngå å berøre ansiktet ditt. Det er ikke en omfattende teknikk for forebygging. Klikk her for mer detaljerte WHO-retningslinjer.

Det er ingen måte å omgå styling på. Det er en viktig komponent i presentasjonen. Vi bruker bilder for å formidle viktig informasjon på hvilken som helst webside. Konvensjonelt (.jpg, .gif, .png) de fleste bilder lastet i nettleseren er i et bitmappformat. Dette betyr at nettleseren er i stand til å kjenne fargen på hver piksel. SVG (Scalable Vector Graphic) er lagret som et sett med instruksjoner som nettleseren tolker som instruksjoner. Altså ikke piksler, men instruksjoner. Dette hjelper i konseptet at nettleseren ikke er avhengig av piksler for skjermen. Derfor kan bildet skaleres uten uskarphet.

SVG er også mindre enn bitmap-bilder, noe som betyr mindre størrelse. Vektorer kan brukes til logger / former. Så for alle størrelsesformer kan du lage en SVG, derav skalerbar.

Trinn for å bli vant til grunnleggende konsept av SVG:

  1. Gå hit
  2. Lag et rektangel og sirkel (eller hvilken som helst form).
  3. Fyll farge
  4. Få koden fra SVG
  5. Lim inn koden i codepen.io eller tekstredigeringsprogram for å se i nettleseren.

Det er det, du har generert din første SVG.

Vennligst referer til bildet for å se redigeringsoppsettet. Andre SVG-redaktører inkluderer Inskape og Adobe Illustrator.

For å gjøre det mer strukturert, la oss gå videre og lage et program som er responsivt og vil endre dimensjonene til SVG på svevet. Vi vil lage et SVG-bilde av at bestefar Rick blir sint når du berører ansiktet hans. Fremgangsmåten beskrives enkelt i de følgende trinn.

  1. Få SVG. Den enkleste måten å lage en SVG er beskrevet over. Det er også SVG-omformere, men resultatene tilsvarer ikke bildene.
  2. Lim inn SVG i du ønsker.
  3. SVG vil inneholde for hvert tegneslag. Identifiser du ønsker å endre på hendelsen (for eksempel onClick eller Hover).
  4. Inspiser elementet du ønsker å endre. I vårt tilfelle ønsker vi å endre formen på leppene for å gjøre morfar Rick sint når du berører (svever) ansiktet hans. Finn klassen, eller lag et klassens navn.
  5. Spill rundt i kategorien Stiler i Chrome for å justere følgende kode. I dette tilfellet kan vi transformere elementet for å rotere smilet og også justere posisjonen (transform-opprinnelse) og farge.
  6. Når du har posisjonen / fargen / formen riktig, fortsett og legg til en egenskap til SVG: svev til klassen i styles.css.

Og det er det. Du har opprettet din første interaktive SVG. Mulighetene herfra er uendelige.

Besøk viraj.info i tilfelle du har noen tilbakemeldinger eller ønsker å utforske mer.