Design SVG-grafikk i nettleseren din

Sep 13, 2025

hvordan

[1. 3]

De Vecteeze editor. er en gratis vektorredigeringssuite som kjører rett i nettleseren din. Denne opplæringen dekker de grunnleggende formverktøyene og redigeringsverktøyene du kan bruke til å redigere noen vektorer på nettstedet. På denne måten kan du bygge merker, knapper, logoer eller noe annet med relativt enkelt.

GUI for denne redaktøren føles som Adobe-programvare, så hvis du allerede bruker Photoshop eller Illustrator, vil du ha en lettere tid å lære tauene. Men selv komplette nybegynnere kan dykke inn i dette og hente det grunnleggende fra grunnen av.

Få Adobe Creative Cloud

Vi skal bruke disse shopping-ikonene fra Vecteezy.

Bare besøk ikonet siden og klikk på "Rediger & AMP; Last ned '-knappen. Dette åpner redaktøren i nettleseren din, slik at du kan tilpasse og bygge på denne grafikken. For denne opplæringen viser vi deg hvordan du kan naB noen av disse ikonene og konvertere dem til en større fremdriftslinje grafikk - det perfekte valget for enhver e-handel hjemmeside.

Så med de shopping-ikonene åpne i vecteezy editor, kan vi komme i gang!

01. Velg ikonene

Click into the icon group and select one icon, then click Duplicate at the top — Klikk i ikongruppen og velg ett ikon, og klikk deretter duplikat øverst

Dobbeltklikk på ikongruppen for å velge alle ikonene (det kan hende du må dobbeltklikke to ganger). Jeg bruker tre spesifikke ikoner for denne opplæringen: handlekurvene, kredittkortet og gavekassen.

Velg handlekurven og klikk på duplikat på toppen av siden. Dette bør gi deg et duplikat av hele ikonet. Flytt dette opp mot toppen og dupliser de to andre.

Merk: Gavekassen er ikke fullt gruppert, så når du klikker for å kopiere, velger du bare et stykke av ikonet. For å fikse dette, bare dra en valgboks over hele gaveikonet, så øverst klikk Rediger-> GROUP. Nå kan du kopiere hele det nåværende ikonet med ett klikk.

Når du har duplikater av alle tre ikonene, dobbeltklikk hvor som helst på det tomme lerretet. Dette bringer deg utenfor gruppen av ikoner, slik at du kan velge andre objekter på siden. Hvis du klikker på noen av de eldre ikonene, velger du hele gruppen. Dette er perfekt, fordi du vil dra dem ned av lerretet, slik at de er ute av syne.

02. Fjern søppel

Change the background opacity if you want it to be white instead of transparent — Endre bakgrunnsoppløsningen hvis du vil at den skal være hvit i stedet for gjennomsiktig

Dobbeltklikk på hvert duplisert ikon for å få tilgang til de enkelte figurene inne. Vi trenger bare hovedikonet, så du bør velge og slette den fargerike sirkelbakgrunnen og slippe skygger.

For å gjøre dette, bare zoom inn veldig nært og velg bakgrunnssirkelen. Trykk deretter på Slett, og det skal forsvinne.

Hvis hele ikonet forsvinner - ikke panikk. Bare klikk på Angre nær toppen eller trykk Ctrl / CMD + Z og prøv igjen. Du må kanskje dobbeltklikke for å komme inn i ikongruppen.

På slutten bør du ha tre rene ikoner som er klare til bruk. Hvis du ikke liker den gjennomsiktige bakgrunnen, kan du alltid få tilgang til bakgrunnspanelet i venstre meny (tredje knapp ned) og øke opaciteten til 100 prosent for en ren hvit bakgrunn.

03. Legge til tekst

Add text labels under each icon with the same font settings — Legg til tekstetiketter under hvert ikon med de samme skrifttypeinnstillingene

Denne fremdriftslinjen vil være utrolig enkel; Bare annonsere tre stadier av en e-handelsbutikk.

For å understreke denne prosessen, la oss legge til etiketter under hvert ikon. I den venstre verktøylinjen finner du tekstverktøyet (andre knapp) og klikker deretter under Pose-ikonet for å legge til en tekstblokk. Legg til teksten 'butikk' og trykk Enter på tastaturet.

Dette auto-velger teksten slik at du kan flytte den rundt og finne en god posisjon. Men hvis du velger tekstverktøyet igjen, kan du endre fontsfamilien, farge, størrelse, brevavstand og andre funksjoner.

Jeg bruker Open Sans semi-fet størrelse 30 med en -1,50 bokstavsavstand. Tekstfarge er # 525252.

Dupliser denne teksten to ganger og legg duplikatene under de andre ikonene. Bruk teksten 'Pay' under Kredittkortikonet og 'Motta' under gavekassen.

Du bør bruke Select-verktøyet for å reposisjonere ikonene over teksten. Også plass hvert ikon i nærheten av like langt som mulig.

04. Justere grafikk

Shift+click to select the ribbon shapes and change the background colour — Shift + Klikk for å velge båndformene og endre bakgrunnsfargen

Før du lager fremdriftslinjen, kan du endre eventuelle farger du liker i ikonene.

For å gjøre dette, dobbeltklikk for å gå inn i en hvilken som helst ikongruppe, og velg deretter hvilken form du vil endre. I dette tilfellet redigerer jeg gaveboksbåndet for å endre fargen fra blått til grønt.

Når du er inne i ikongruppen, hold Shift mens du klikker for å velge mer enn ett element om gangen. Jeg velger de horisontale og vertikale rektanglene, pluss bueformet øverst.

I Select-panelet (første ikon i venstre meny) Finn fyllinnstillingene. Du vil se standardfargen er # 2E3192. Klikk på den fyllemenyen for å få tilgang til et rullegardinfarget. Her kan du enten dra rundt for å finne fargen du vil, eller skriv inn en heksekode direkte.

Skriv inn # 518531 og trykk Enter. Dette bør lagre resultatet og oppdatere alle tre figurer samtidig. Du er velkommen til å leke med andre fargeinnstillinger du vil endre!

05. Starte fremdriftslinjen

Click the top-left circle in the Elements panel to add a new circle to the canvas — Klikk på den øverste venstre sirkelen i elementpanelet for å legge til en ny sirkel til lerretet

For å lage en fremdriftslinje trenger du bare to former: sirkler og rektangler. Heldigvis er begge disse tilgjengelige i Elements-panelet som ligger på bunnen av Verktøy-menyen.

Klikk på Elements-panelet og velg sirkelformen, som er det aller første elementet i listen. Det vil automatisk plassere en mørk grå sirkel i midten av arbeidsområdet ditt.

Du kan endre størrelsen på sirkelen ved å dra de små hvite firkantede boksene i hjørnet eller velggrensningen. Dette fungerer bra, men det er ikke så presist som direkte resizing-funksjonen.

Så i stedet gå tilbake til Velg verktøyet og kontroller at den nye sirkelen er valgt. På toppen av Select Tool-panelet bør du se en valgstørrelse med en høyde og breddeverdi.

Skriv inn 100 i begge feltene og dra din første sirkel under det første ikonet.

06. Dupliserende sirkler

Resize the circle and duplicate twice, then move them under each shopping icon — Endre størrelsen på sirkelen og duplikat to ganger, og flytt dem deretter under hvert shoppingikon

Med din sirkelform som er valgt, klikker du på duplikat i toppmenyen. Nå, plasser denne duplikatet slik at den justerer seg tett med din opprinnelige sirkel. Prøv å få det rett på toppen av den første sirkelen, slik at de ser ut som en form.

Nå, hvis du holder skift og klikker, kan du dra denne dupliserte sirkelen i en rett linje horisontalt. Dette lar deg perfekt justere alle sirkler sammen i en rett linje (eller nær nok til en).

Gjør dette til du har tre forskjellige sirkelformer ved 100 x 100, hver plassert under de tre ikonene.

07. Legg til noen tilkoblingslinjer

Select the rectangle shape and arrange it behind the three circles — Velg rektangelformen og ordne den bak de tre sirkler

Flytt tilbake til elementer-panelet og finn kvadratformen. Klikk for å legge til en firkant på lerretet.

Med denne formen som er valgt, må du flytte tilbake til Select-verktøyet og finn størrelsespanelets bredde / høyde. Siden dette rektangelet skal spore hele bredden på fremdriftslinjen, trenger vi bare en veldig lang form. Så endre høyden til 10 og bredden til det samme nummeret du trenger for å koble alle sirkler sammen. Mine er 750 bred.

Nå, med dette rektangelet på plass, se mot bunnen av Select-panelet der det står arrangere & amp; Flip. Klikk på det andre ikonet i øverste rad, som lar deg flytte en hvilken som helst valgt form bak de andre former.

Merk: Du må kanskje klikke på den nedre knappen noen ganger for å få rektangelet bak alle tre sirkler. Men nå er forbindelsesrektangelet bare synlig mellom sirkelformene, slik at vi kan legge til tekst i sirkler senere.

08. Recolure.

Recolour all the shapes and include a small stroke on the three circles — Tekolere alle figurene og ta med et lite slag på de tre kretsene

Den nåværende fremdriftslinjen ser litt mørk ut, så la oss endre fargen litt.

Klikk for å velge det lange rektangelet og finn fyllinnstillingene i Verktøy-panelet. Endre fargen til # C5C5C5 og trykk Enter.

Nå, klikk hvor som helst off-lerret for å fjerne markeringen av rektangelet. Vi ønsker også å endre sirkelfargene, og de skal være lettere, ved hjelp av den mørkere grå som en grensefarge.

Hold Shift, og klikk på hver av de tre sirkler. Juster fyllfargen til # f5f5f5, trykk Enter og klikk deretter på X-ikonet for å lukke fyllfargevalgspanelet. Nedenfor finner du hjerneslagsinnstillinger. Endre strekkfyllingen til # C5C5C5 og trykk Enter.

Klikk på X-ikonet for å lukke dette fargevalgspanelet, og endre strekkstørrelsen til 6. På dette stadiet anbefaler jeg også å gruppere alle sirkler og rektangelet sammen ved å dra en valgkasse og gå til Rediger & GT Gruppe. Nå kan du justere posisjonen til alle former på en gang med letthet.

09. Legge til fremdriftstrinn

Add a text label into the first circle and duplicate the text for all three shapes — Legg til en tekstetikett i den første sirkelen og dupliser teksten for alle tre former

La oss legge til noen tall i hver sirkel for å fullføre fremdriftslinjedesignet.

Klikk på tekstverktøyet og skriv inn nummer 1 i den første sirkelen. Jeg bruker Open Sans ekstra fet, størrelse 45 med fargen # C5C5C5 for å matche grensene. Dra denne teksten slik at den er plassert i midten av sirkelen.

Dupliser tekstelementet og flytt det til den andre sirkelen med teksten '2'. Gjør det samme for den tredje sirkelen med tekst '3'.

10. Fremhev det første trinnet

Recolour the first circle blue so it appears like the active progress step — Tenk den første sirkelen blå, så det ser ut som det aktive fremgangstrinnet

Som en finish, la oss markere det aller første trinnet med en lettere blå oversikt. Velg først nummeret '1' du nettopp opprettet, og endre fyllingen til # 4976A3. Klikk deretter for å velge sirkelen bak teksten. Finn strekkinnstillingene og endre slagfargen til # 4976A3. Dette bør legge til en mørk blågrense rundt sirkelen. Med sirkelen som fortsatt er valgt, klikker du på Fyllinnstillinger og endrer fargen til # E2EBFA.

Og det er det! Nå kan du eksportere dette som en PNG / JPG ved hjelp av nedlastingsfunksjonen i øverste høyre hjørne. Du kan også skjule den hvite bakgrunnen for å eksportere dette som en gjennomsiktig PNG og endre den overordnede dokumentstørrelsen ved hjelp av bakgrunnspanelet (tredje knappen i venstre meny).

Eller hvis du vil redde dette for fremtidige endringer, bare gå til File & GT; lagre for senere. Du må lage en gratis vecezezy-konto, men det er en fin måte å holde det harde arbeidet ditt lagret for fremtidig referanse.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 295. Kjøp det her .

Les mer:

10 gyldne regler for responsive svgs
Utforsk de spennende nye funksjonene i SVG 2
Supercharge SVG animasjoner med GSAP

Design SVG-grafikk i nettleseren din

01. Velg ikonene

02. Fjern søppel

03. Legge til tekst

04. Justere grafikk

05. Starte fremdriftslinjen

06. Dupliserende sirkler

07. Legg til noen tilkoblingslinjer

08. Recolure.

09. Legge til fremdriftstrinn

10. Fremhev det første trinnet

hvordan - Mest populære artikler

Slik bruker du Gravity Sketch

Hvordan stoppe brillene dine tåke når du bruker en ansiktsmaske

Slik forfylder du designporteføljen

Slik legger du til video på interaktive PDF-filer

Bygg skalerbare responsive komponenter

Bruke vektorverktøy: En webdesigners tilnærming

Oppdag underpainting og hvordan du kan gjøre best mulig utnyttelse av det

Boost D3.JS-diagrammer med SVG-gradienter

Kategorier