Design SVG Grafik i din browser

Feb 2, 2026

hvordan

Det VOECTEZY EDITOR er en gratis vektor redigering suite, der løber lige i din browser. Denne vejledning dækker de grundlæggende formværktøjer og redigeringsværktøjer, du kan bruge til at redigere eventuelle vektorer på webstedet. På denne måde kan du bygge badges, knapper, logoer eller noget andet med relativ lethed.

GUI'en for denne editor føles svarende til Adobe-softwaren, så hvis du allerede bruger Photoshop eller Illustrator, får du en nemmere tid at lære rebene. Men selv komplette begyndere kan dykke ind i dette og hente det grundlæggende fra bunden.

Få Adobe Creative Cloud

Vi skal bruge disse indkøbsikoner fra Vecteezy.

Bare besøg ikoner side og klik på 'Rediger & Amp; Download 'knappen. Dette åbner redaktøren lige i din browser, så du kan tilpasse og bygge på denne grafik. For denne vejledning viser vi dig, hvordan du nab nogle af disse ikoner og konverterer dem til en større statuslinje, grafisk - det perfekte valg til enhver e-handels hjemmeside.

Så med de indkøbs ikoner åben i Vecteezy Editor, kan vi komme i gang!

01. Vælg ikonerne

Click into the icon group and select one icon, then click Duplicate at the top — Klik på ikongruppen og vælg et ikon, og klik derefter på Duplicate øverst

Dobbeltklik på ikongruppen for at vælge alle ikonerne (du skal muligvis dobbeltklikke to gange). Jeg bruger tre specifikke ikoner til denne vejledning: indkøbsposer, kreditkort og gaveæske.

Vælg indkøbsposen og klik på duplikat øverst på siden. Dette bør give dig et duplikat af hele ikonet. Flyt dette op mod toppen og duplikere de to andre.

Bemærk: Gavekassen er ikke fuldt grupperet, så når du klikker på at duplikere, skal du kun vælge et stykke af ikonet. For at løse dette, skal du bare trække en valgkasse over hele gaveikonet, og derefter på toppen Klik Rediger- & GT; Gruppe. Nu kan du duplikere hele det nuværende ikon med et enkelt klik.

Når du har duplikater af alle tre ikoner, skal du dobbeltklikke overalt på det tomme lærred. Dette bringer dig uden for gruppen af ikoner, så du kan vælge andre objekter på siden. Hvis du klikker på nogen af de ældre ikoner, vælger du hele gruppen. Dette er perfekt, fordi du vil trække dem ned fra lærredet, så de er ude af syne.

02. Ryd affaldet

Change the background opacity if you want it to be white instead of transparent — Skift baggrundsopacitet, hvis du vil have det til at være hvid i stedet for gennemsigtig

Dobbeltklik på hvert duplikeret ikon for at få adgang til de enkelte former indeni. Vi har kun brug for hovedikonet, så du skal vælge og slette den farverige cirkel baggrunde og slip skygger.

For at gøre dette skal du blot zoome i meget tæt og vælge baggrundscirklen. Tryk derefter på Slet, og det skal forsvinde.

Hvis hele ikonet forsvinder - ikke panik. Bare klik på Fortryd tæt på toppen eller tryk CTRL / CMD + Z og prøv igen. Du skal muligvis dobbeltklikke for at komme ind i ikongruppen.

I slutningen skal du have tre rene ikoner klar til brug. Hvis du ikke kan lide den gennemsigtige baggrund, kan du altid få adgang til baggrundspanelet i venstre menu (tredje knap ned) og øge opaciteten til 100 procent for en ren hvid baggrund.

03. Tilføjelse af tekst.

Add text labels under each icon with the same font settings — Tilføj tekstetiketter under hvert ikon med samme skrifttypeindstillinger

Denne fremdriftslinje vil være utroligt enkle; Bare reklame for tre faser af en e-handelsbutik.

For at understrege denne proces, lad os tilføje etiketter under hvert ikon. I venstre værktøjslinje skal du finde tekstværktøjet (anden knap) og derefter klikke under taskeikonet for at tilføje en tekstblok. Tilføj teksten 'Shop' og tryk på Enter på tastaturet.

Dette automatisk vælger teksten, så du kan flytte den rundt og finde en god position. Men hvis du vælger tekstværktøjet igen, kan du ændre skrifttypefamilien, farve, størrelse, bogstavafstand og andre funktioner.

Jeg bruger åben sans semi-fed størrelse 30 med en -1,50-bogstavafstand. Tekstfarve er # 525252.

Duplikerer denne tekst to gange og læg du duplikaterne under de andre ikoner. Brug teksten 'Pay' under ikonet Kreditkort og 'Modtag' under Gavekassen.

Du skal bruge SELECT-værktøjet til at omplacere ikonerne over teksten. Også plads hvert ikon tæt på ligefrem fra hinanden, hvis det er muligt.

04. Justering af grafik

Shift+click to select the ribbon shapes and change the background colour — Skift + Klik for at vælge båndformer og ændre baggrundsfarven

Før du opretter fremdriftslinjen, kan du ændre de farver, du kan lide i ikonerne.

For at gøre dette skal du dobbeltklikke for at indtaste en hvilken som helst ikongruppe, og vælg derefter, hvilken form du vil ændre. I dette tilfælde redigerer jeg gaverboksbåndet for at ændre farven fra blå til grøn.

Når du er inde i ikongruppen, skal du holde Skift, mens du klikker for at vælge mere end et element ad gangen. Jeg vælger de vandrette og lodrette rektangler, plus bueformen øverst.

I valgpanelet (første ikon i venstre menu) Find fyldningsindstillingerne. Du kan se standardfarven er # 2E3192. Klik på, der udfylder menuen for at få adgang til et drop-down farvehjul. Her kan du enten trække rundt for at finde den ønskede farve, eller indtast en hex-kode direkte.

Indtast # 518531 og tryk Enter. Dette skal gemme resultatet og opdatere alle tre figurer på én gang. Du er velkommen til at lege med andre farver, du gerne vil ændre!

05. Start af fremdriftslinjen

Click the top-left circle in the Elements panel to add a new circle to the canvas — Klik på den øverste venstre cirkel i panelet Elements for at tilføje en ny cirkel til lærredet

For at oprette en statuslinje har du kun brug for to former: cirkler og rektangler. Heldigvis er begge disse tilgængelige i PANELS panelet placeret i bunden af menuen Værktøjer.

Klik på PANELs panelet og vælg cirkelformen, som er det allerførste element i listen. Det vil automatisk placere en mørkegrå cirkel i midten af dit arbejdsområde.

Du kan ændre størrelsen på cirklen ved at trække de små hvide firkantede bokse i hjørnet eller vælgergrænsen. Dette fungerer godt, men det er ikke så præcist som direkte resizing-funktionen.

Så i stedet gå tilbage til Select Tool og sørg for, at din nye cirkel er valgt. Øverst på SELECT-værktøjspanelet skal du se en udvælgelsestørrelse med en højde og bredde værdi.

Indtast 100 i begge felter og træk din første cirkel under det første ikon.

06. Duplicating Circles.

Resize the circle and duplicate twice, then move them under each shopping icon — Ændre størrelsen på cirklen og duplikere to gange, og flyt dem under hvert indkøbsikon

Med din cirkelform valgt, skal du klikke på Duplicate i topmenuen. Nu skal du genplacere dette duplikat, så det passer tæt på din oprindelige cirkel. Prøv at få det lige oven på den første cirkel, så de ligner en form.

Nu, hvis du holder Shift og Click, kan du trække denne duplikerede cirkel i en lige linje vandret. Dette giver dig mulighed for at tilpasse alle dine cirkler perfekt i en lige linje (eller tæt nok til en).

Gør dette, indtil du har tre forskellige cirkelformer ved 100 x 100, der hver er placeret under de tre ikoner.

07. Tilføj nogle tilslutningslinjer

Select the rectangle shape and arrange it behind the three circles — Vælg rektangelformen og arranger det bag de tre cirkler

Flyt tilbage til panelet Elements og find den firkantede form. Klik for at tilføje en firkant på lærredet.

Med denne form valgt Flyt tilbage til SELECT-værktøjet og find panelet Bredde / Højde størrelse. Da dette rektangel skulle spænde over hele bredden af fremdriftslinjen, har vi bare brug for en rigtig lang form. Så skift højden til 10 og bredden til det nummer, du har brug for til at forbinde alle dine cirkler sammen. Mine er 750 bred.

Nu, med dette rektangel på plads, se mod bunden af vælgerpanelet, hvor det står arrangere & amp; Flip. Klik på det andet ikon i øverste række, som lader dig flytte en hvilken som helst valgt form bag de andre former.

Bemærk: Du skal muligvis klikke på nederste knap et par gange for at få rektanglet bag alle tre cirkler. Men nu er det forbindelsesrektangel kun synligt mellem cirkelformerne, så vi kan tilføje tekst i cirklerne senere.

08. Recolouring.

Recolour all the shapes and include a small stroke on the three circles — Recolour alle formerne og inkludere et lille slagtilfælde på de tre cirkler

Den nuværende fremskridtslinje ser lidt mørkt ud, så lad os ændre farven lidt.

Klik for at vælge det lange rektangel og find fyldindstillingerne i panelet Værktøjer. Skift farve til # C5C5C5 og tryk ENTER.

Klik nu på hvor som helst off-canvas for at fravælge rektanglet. Vi ønsker også at ændre cirkelfarverne, og de skal være lettere, ved hjælp af den mørkere grå som en grænsekarve.

Hold Shift, og klik på hver af de tre cirkler. Juster fyldfarven til # F5F5F5, tryk på Enter og klik derefter på X-ikonet for at lukke panelet Fyld farve. Nedenfor finder du slagtilfælde. Skift slagtilfælde Fyld til # C5C5C5 og tryk Enter.

Klik på X-ikonet for at lukke dette farvevalgspanel, og skift derefter slagstørrelsen til 6. På dette tidspunkt anbefaler jeg også at gruppere alle cirkler og rektangel sammen ved at trække en valgkasse og gå til redigering og GRON. Nu kan du justere placeringen af alle former med én gang med lethed.

09. Tilføjelse af fremskridt trin

Add a text label into the first circle and duplicate the text for all three shapes — Tilføj en tekst etiket i den første cirkel og duplikér teksten til alle tre figurer

Lad os tilføje nogle numre i hver cirkel for at færdiggøre Progress Bar Design.

Klik på tekstværktøjet og indtast nummer 1 i den første cirkel. Jeg bruger åbne sans ekstra fed, størrelse 45 med farven # C5C5C5 for at matche grænserne. Træk denne tekst, så den er placeret i midten af cirklen.

Duplikér tekstelementet og flyt det til den anden cirkel med teksten '2'. Gør det samme for den tredje cirkel med tekst '3'.

10. Fremhæv det første skridt

Recolour the first circle blue so it appears like the active progress step — Recolour den første cirkelblå, så det ser ud som det aktive fremskridt skridt

Som et efterbehandling, lad os fremhæve det allerførste skridt ved hjælp af en lysere blå skitse. Vælg først nummeret '1', du netop har oprettet, og skift fyld til # 4976A3. Klik derefter på for at vælge cirklen bag teksten. Find slagtilfælde indstillinger og skift slagfarve til # 4976A3. Dette skal tilføje en mørk blå grænse omkring cirklen. Med cirklen stadig valgt, skal du klikke på Fillindstillingerne og ændre farven til # E2EBFA.

Og det er det! Nu kan du eksportere dette som en PNG / JPG ved hjælp af downloadfunktionen i øverste højre hjørne. Du kan også skjule den hvide baggrund for at eksportere dette som en gennemsigtig PNG og ændre den samlede dokumentstørrelse ved hjælp af baggrundspanelet (tredje knap i menuen til venstre).

Eller hvis du gerne vil gemme dette for fremtidige ændringer, skal du bare gå til File & GT; Gem for senere. Du bliver nødt til at oprette en gratis vefeezy-konto, men det er en fantastisk måde at holde dit hårde arbejde gemt til fremtidig reference.

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 295. Køb det her .

Læs mere:

10 gyldne regler for lydhør SVGS
Udforsk de spændende nye funktioner i SVG 2
SuperCharge SVG animationer med GSAP

Design SVG Grafik i din browser

01. Vælg ikonerne

02. Ryd affaldet

03. Tilføjelse af tekst.

04. Justering af grafik

05. Start af fremdriftslinjen

06. Duplicating Circles.

07. Tilføj nogle tilslutningslinjer

08. Recolouring.

09. Tilføjelse af fremskridt trin

10. Fremhæv det første skridt

hvordan - Mest populære artikler

Sådan undgår du en Amazon Prime Day 2020 Fejl

Tackle portræt maleri med olier

trin-for-trin: hvordan man efterligner oliemaling i Corel Paint

Maling som en impressionist

Sådan opbygges et websted på fuld side i vinkel

Sådan flyttes mellem Daz Studio og Cinema 4D

Sådan tegner du Harley Quinn

Sådan navngiver du dit webdesign agentur

Kategorier