Design SVG-grafik i din webbläsare

Sep 14, 2025

Hur

De Vecteezy redaktör är en gratis vektorredigeringsvit som körs direkt i din webbläsare. Denna handledning täcker de grundläggande formverktygen och redigeringsverktygen du kan använda för att redigera alla vektorer på webbplatsen. På så sätt kan du bygga märken, knappar, logotyper eller något annat med relativ lätthet.

GUI för den här redigeraren känns som ADOBE-programvara, så om du redan använder Photoshop eller Illustrator, har du en lättare tid att lära sig repen. Men även kompletta nybörjare kan dyka in i detta och hämta grunderna från början.

Få Adobe Creative Cloud

Vi ska använda dessa shoppingikoner från Vecteezy.

Besök bara ikonen ikoner och klicka på "Edit & Amp; Hämta '-knappen. Detta öppnar redigeraren direkt i din webbläsare så att du kan anpassa och bygga på dessa grafik. För den här handledningen visar vi dig hur du behöver några av dessa ikoner och konvertera dem till en större framstegsgrafik - det perfekta valet för någon e-handel hemsida.

Så med de shopping ikoner öppna i Vecteezy Editor, kan vi komma igång!

01. Välj ikonerna

Click into the icon group and select one icon, then click Duplicate at the top — Klicka på ikongruppen och välj en ikon och klicka sedan på Duplicera på toppen

Dubbelklicka på ikongruppen för att välja alla ikoner (du kan behöva dubbelklicka två gånger). Jag använder tre specifika ikoner för den här handledningen: shoppingkassan, kreditkortet och presentförpackningen.

Välj handväska och klicka på Duplicera längst upp på sidan. Detta borde ge dig ett duplikat av hela ikonen. Flytta detta upp till toppen och duplicera de andra två.

Obs! Presentförpackningen är inte helt grupperad, så när du klickar för att duplicera väljer du bara en bit av ikonen. För att åtgärda det här, dra bara en markeringslåda över hela presentikonen, sedan på toppklicken Redigera- och GT; grupp. Nu kan du duplicera hela den nuvarande ikonen med ett klick.

När du har duplikat av alla tre ikoner dubbelklickar du var som helst på den tomma duken. Detta tar dig utanför gruppen av ikoner så att du kan välja andra objekt på sidan. Om du klickar på någon av de äldre ikonerna väljer du hela gruppen. Det här är perfekt, för att du vill dra dem ner av duken så de är ute av sikte.

02. Rensa skräpet

Change the background opacity if you want it to be white instead of transparent — Ändra bakgrunden opacitet om du vill att den ska vara vit istället för transparent

Dubbelklicka på varje duplicerad ikon för att komma åt de enskilda formerna inuti. Vi behöver bara huvudikonen, så du bör välja och ta bort de färgglada cirkelbakgrunderna och släppa skuggor.

För att göra detta, zooma bara in mycket nära och välj bakgrundscirkeln. Tryck sedan på Ta bort, och det ska försvinna.

Om hela ikonen försvinner - inte panik. Klicka bara på Ångra nära toppen eller tryck Ctrl / cmd + z och försök igen. Du kan behöva dubbelklicka för att komma in i ikongruppen.

I slutet borde du ha tre rena ikoner färdiga att använda. Om du inte gillar den genomskinliga bakgrunden kan du alltid komma åt bakgrundspanelen i den vänstra menyn (tredje knappen nedåt) och öka opaciteten till 100 procent för en ren vit bakgrund.

03. Lägga till text

Add text labels under each icon with the same font settings — Lägg till textetiketter under varje ikon med samma typsnitt

Denna framstegsbar blir otroligt enkel; bara reklam tre etapper av en e-handel butik.

För att betona denna process, låt oss lägga till etiketter under varje ikon. I den vänstra verktygsfältet, hitta textverktyget (andra knappen) och klicka sedan under påse-ikonen för att lägga till ett textblock. Lägg till texten "Shop" och tryck in på ditt tangentbord.

Den här automatiskt väljer texten så att du kan flytta den och hitta en bra position. Men om du väljer textverktyget igen kan du ändra fontfamiljen, färgen, storleken, bokstavsavståndet och andra funktioner.

Jag använder Open Sans semi-fet storlek 30 med ett -1,50 brevavstånd. Textfärg är # 525252.

Duplicera den här texten två gånger och placera dubbletter under de andra ikonerna. Använd texten "Betala" under ikonen Kreditkort och "Ta emot" under presentförpackningen.

Du bör använda det valda verktyget för att omplacera ikonerna ovanför texten. Också utrymme varje ikon nära i likhet med varandra om möjligt.

04. Justering av grafik

Shift+click to select the ribbon shapes and change the background colour — Shift + Klicka för att välja bandet former och ändra bakgrundsfärgen

Innan du skapar progressfältet kan du ändra några färger du gillar i ikonerna.

För att göra detta, dubbelklicka för att gå till någon ikongrupp och välj sedan vilken form du vill ändra. I det här fallet redigerar jag presentförpackningsbandet för att ändra färgen från blått till grönt.

När du är inne i ikongruppen håller du skiftet medan du klickar på för att välja mer än ett objekt i taget. Jag väljer de horisontella och vertikala rektanglarna, plus bågformen på toppen.

I den valda panelen (första ikonen i vänstra menyn) hittar du fyllningsinställningarna. Du får se standardfärgen är # 2e3192. Klicka på den önskade menyn för att komma åt ett rullgardinsmeny. Här kan du antingen dra runt för att hitta den färg du vill ha, eller ange en hex-kod direkt.

Ange # 518531 och tryck på Enter. Detta bör spara resultatet och uppdatera alla tre formerna samtidigt. Känn dig fri att leka med några andra färginställningar som du vill ändra!

05. Starta framstegsfältet

Click the top-left circle in the Elements panel to add a new circle to the canvas — Klicka på den övre vänstra cirkeln i panelen Elements för att lägga till en ny cirkel till duken

För att skapa en framstegsbar behöver du bara två former: cirklar och rektanglar. Tack och lov är båda dessa tillgängliga i elementpanelen längst ner på menyn Verktyg.

Klicka på Elements-panelen och välj cirkelformen, vilket är det första objektet i listan. Det kommer automatiskt att placera en mörkgrå cirkel i mitten av din arbetsyta.

Du kan ändra storlek på cirkeln genom att dra de lilla vita fyrkantiga rutorna i hörnet eller markeringsgränsen. Det här fungerar bra, men det är inte så exakt som den direkta resizing-funktionen.

Så istället gå tillbaka till Select-verktyget och se till att din nya cirkel är vald. Slut på panelen Välj verktyg bör du se en selektionstorlek med ett höjd och ett breddvärde.

Ange 100 i båda fälten och dra din första cirkel under den första ikonen.

06. Duplicera cirklar

Resize the circle and duplicate twice, then move them under each shopping icon — Ändra storlek på cirkeln och duplicera två gånger, flytta dem sedan under varje shoppingikon

Med din cirkelform som valts, klicka på Duplicera i toppmenyn. Nu, omplacera den här dubbla så att den är nära med din ursprungliga cirkel. Försök att få det precis ovanpå den första cirkeln så att de ser ut som en form.

Nu, om du håller skift och klick, kan du dra den här dubbla cirkeln i en rak linje horisontellt. Detta låter dig helt anpassa alla dina cirklar ihop i en rak linje (eller nära till en).

Gör det tills du har tre olika cirkelformer vid 100 x 100, var och en placeras under de tre ikonerna.

07. Lägg till några anslutningslinjer

Select the rectangle shape and arrange it behind the three circles — Välj rektangelformen och ordna den bakom de tre cirklarna

Flytta tillbaka till panelen Elements och hitta torget. Klicka för att lägga till en torg på duken.

Med den här formen som valts flyttas tillbaka till SELECT-verktyget och hitta panelen Bredd / Höjdstorlek. Eftersom denna rektangel bör omfatta hela bredden på framdriftsfältet, behöver vi bara en riktigt lång form. Så ändra höjden till 10 och bredden till vilket nummer du behöver för att ansluta alla dina cirklar tillsammans. Gruvan är 750 bred.

Nu, med denna rektangel i position, titta mot botten av den valda panelen där det står ordnas och amp; Flip. Klicka på den andra ikonen i den övre raden, vilket gör att du kan flytta valfri form bakom de andra formerna.

Obs! Du kan behöva klicka på den nedre knappen några gånger för att få rektangeln bakom alla tre cirklarna. Men nu är den anslutande rektangeln synlig mellan cirkelformerna, så vi kan lägga till text i cirklarna senare.

08. Recolouring

Recolour all the shapes and include a small stroke on the three circles — Recolour alla former och inkluderar en liten stroke på de tre cirklarna

Den nuvarande framstegsfältet ser lite mörk ut, så låt oss ändra färgen lite.

Klicka för att välja den långa rektangeln och hitta fyllnadsinställningarna i verktygspanelen. Ändra färgen till # C5C5C5 och tryck på Enter.

Klicka nu någonstans off-canvas för att avmarkera rektangeln. Vi vill också ändra cirkelfärgerna, och de ska vara lättare, med den mörkare grå som en gränsfärg.

Håll skiftet och klicka på var och en av de tre cirklarna. Justera fyllfärgen till # F5F5F5, tryck på Enter och klicka sedan på X-ikonen för att stänga panelen Fyll färg. Nedan hittar du strokeinställningar. Ändra stroke fyllningen till # c5c5c5 och tryck in.

Klicka på X-ikonen för att stänga den här färgvalspanelen och ändra sedan slagstorleken till 6. I detta skede rekommenderar jag också att gruppera alla cirklar och rektangeln tillsammans genom att dra en markeringslåda och gå till Redigera och GT; grupp. Nu kan du justera positionen för alla former samtidigt med lätthet.

09. Lägga till framstegssteg

Add a text label into the first circle and duplicate the text for all three shapes — Lägg till en textmärke i den första cirkeln och duplicera texten för alla tre formerna

Låt oss lägga till några siffror i varje cirkel för att slutföra Progress Bar-designen.

Klicka på textverktyget och ange nummer 1 i den första cirkeln. Jag använder Open Sans Extra-Bold, storlek 45 med färgen # C5C5C5 för att matcha gränserna. Dra den här texten så att den är placerad i mitten av cirkeln.

Duplicera textelementet och flytta det i den andra cirkeln med texten "2". Gör detsamma för den tredje cirkeln med text "3".

10. Markera det första steget

Recolour the first circle blue so it appears like the active progress step — Recolour den första cirkeln blå så det verkar som det aktiva framstegssteget

Som en färdig beröring, låt oss lyfta fram det allra första steget med en lättare blå kontur. Välj först numret '1' du just skapat och ändra fyllningen till # 4976a3. Klicka sedan för att välja cirkeln bakom texten. Hitta strokeinställningarna och ändra stroke-färgen till # 4976A3. Detta bör lägga till en mörkblå kant runt cirkeln. När cirkeln som fortfarande är valt klickar du på fyllningsinställningarna och ändrar färgen till # e2ebfa.

Och det är allt! Nu kan du exportera detta som en PNG / JPG med hjälp av nedladdningsfunktionen i det övre högra hörnet. Du kan också gömma den vita bakgrunden för att exportera detta som en transparent PNG och ändra den totala dokumentstorleken med bakgrundspanelen (tredje knappen i menyn på vänster sida).

Eller om du vill spara detta för framtida förändringar, gå bara till fil och GT; spara för senare. Du måste skapa ett gratis Vecteezy-konto, men det är ett bra sätt att hålla ditt hårda arbete som sparats för framtida referens.

Denna artikel uppträdde ursprungligen i nätmagasin Utgåva 295. Köp det här .

Läs mer:

10 gyllene regler för responsiva svgs
Utforska de spännande nya funktionerna i SVG 2
Super CHARGE SVG Animationer med GSAP

Design SVG-grafik i din webbläsare

01. Välj ikonerna

02. Rensa skräpet

03. Lägga till text

04. Justering av grafik

05. Starta framstegsfältet

06. Duplicera cirklar

07. Lägg till några anslutningslinjer

08. Recolouring

09. Lägga till framstegssteg

10. Markera det första steget

Hur - Mest populära artiklar

Hur man ritar en katt

Tackla porträttmålning med oljor

En introduktion till front-testning

Skapa interaktiva 3D-bilder med tre.js

Hur man målar ett atmosfäriskt porträtt i Photoshop

Hur man bygger snabbare webbplatser

Vrid dina 2D-design till 3D med Project Felix

Skapa sensationella solnedgångar i Photoshop

Kategorier