ออกแบบกราฟิก SVG ในเบราว์เซอร์ของคุณ

Feb 2, 2026

วิธีการ

ที่ Vecteezy Editor เป็นชุดแก้ไขเวกเตอร์ฟรีที่ทำงานในเบราว์เซอร์ของคุณ บทช่วยสอนนี้ครอบคลุมเครื่องมือรูปทรงพื้นฐานและเครื่องมือแก้ไขที่คุณสามารถใช้เพื่อแก้ไขเวกเตอร์ใด ๆ บนเว็บไซต์ วิธีนี้คุณสามารถสร้างป้ายปุ่มโลโก้หรือสิ่งอื่นใดได้อย่างง่ายดาย

GUI สำหรับบรรณาธิการนี้รู้สึกคล้ายกับซอฟต์แวร์ Adobe ดังนั้นหากคุณใช้ Photoshop หรือ Illustrator แล้วคุณจะมีเวลาที่จะเรียนรู้ที่ง่ายขึ้น แต่แม้แต่ผู้เริ่มต้นที่สมบูรณ์สามารถดำน้ำเข้ากับสิ่งนี้และรับพื้นฐานตั้งแต่เริ่มต้น

รับ Adobe Creative Cloud

เราจะใช้ไอคอนการช็อปปิ้งเหล่านี้จาก Vecteezy

เพียงไปที่หน้าไอคอนและคลิก 'แก้ไข & amp; ดาวน์โหลดปุ่ม '. สิ่งนี้เปิดตัวแก้ไขในเบราว์เซอร์ของคุณเพื่อให้คุณสามารถปรับแต่งและสร้างกราฟิกเหล่านี้ได้ สำหรับการกวดวิชานี้เราจะแสดงให้คุณเห็นถึงวิธีที่จะตอบโต้ไอคอนเหล่านี้และแปลงเป็นกราฟิกบาร์ความคืบหน้าขนาดใหญ่ - ตัวเลือกที่สมบูรณ์แบบสำหรับโฮมเพจอีคอมเมิร์ซใด ๆ

ดังนั้นด้วยไอคอนการช็อปปิ้งที่เปิดในบรรณาธิการ Vecteezy เราสามารถเริ่มต้นได้!

01. เลือกไอคอน

Click into the icon group and select one icon, then click Duplicate at the top — คลิกลงในกลุ่มไอคอนและเลือกไอคอนเดียวจากนั้นคลิกทำซ้ำที่ด้านบน

ดับเบิลคลิกที่กลุ่มไอคอนเพื่อเลือกไอคอนทั้งหมด (คุณอาจต้องดับเบิลคลิกสองครั้ง) ฉันจะใช้ไอคอนเฉพาะสามรายการสำหรับบทช่วยสอนนี้: ถุงช้อปปิ้งบัตรเครดิตและกล่องของขวัญ

เลือกกระเป๋าช้อปปิ้งและคลิกซ้ำที่ด้านบนสุดของหน้า สิ่งนี้ควรให้ไอคอนทั้งหมดที่ซ้ำกัน เลื่อนสิ่งนี้ไปทางด้านบนและทำซ้ำอีกสองอัน

หมายเหตุ: กล่องของขวัญไม่ได้จัดกลุ่มอย่างสมบูรณ์ดังนั้นเมื่อคุณคลิกเพื่อทำซ้ำคุณจะเลือกชิ้นส่วนของไอคอนเท่านั้น ในการแก้ไขปัญหานี้เพียงแค่ลากกล่องเลือกผ่านไอคอนของขวัญทั้งหมดแล้วที่คลิกขวาที่แก้ไข - & GT; กลุ่ม ตอนนี้คุณสามารถทำซ้ำไอคอนปัจจุบันได้ด้วยคลิกเดียว

เมื่อคุณมีซ้ำทั้งสามไอคอนให้ดับเบิลคลิกที่ใดก็ได้บนผืนผ้าใบที่ว่างเปล่า สิ่งนี้นำคุณออกไปนอกกลุ่มไอคอนเพื่อให้คุณสามารถเลือกวัตถุอื่น ๆ ในหน้า หากคุณคลิกไอคอนที่เก่ากว่าใด ๆ คุณจะเลือกกลุ่มทั้งหมด นี่สมบูรณ์แบบเพราะคุณต้องการที่จะลากพวกเขาลงจากผ้าใบเพื่อให้พวกเขามองไม่เห็น

02. ล้างขยะ

Change the background opacity if you want it to be white instead of transparent — เปลี่ยนความทึบพื้นหลังหากคุณต้องการให้เป็นสีขาวแทนโปร่งใส

ดับเบิลคลิกที่ไอคอนที่ซ้ำกันแต่ละครั้งเพื่อเข้าถึงแต่ละรูปร่างภายใน เราต้องการไอคอนหลักเท่านั้นดังนั้นคุณควรเลือกและลบพื้นหลังวงกลมสีสันสดใสและวางเงา

ในการทำเช่นนี้เพียงซูมเข้าใกล้มากและเลือกวงกลมพื้นหลัง จากนั้นกด DELETE และควรจะหายไป

หากไอคอนทั้งหมดหายไป - อย่าตกใจ เพียงคลิกยกเลิกใกล้กับด้านบนหรือกด CTRL / CMD + Z แล้วลองอีกครั้ง คุณอาจต้องดับเบิลคลิกเพื่อเข้าสู่กลุ่มไอคอน

ในตอนท้ายคุณควรมีไอคอนสะอาดสามไอคอนพร้อมใช้งาน หากคุณไม่ชอบพื้นหลังโปร่งใสคุณสามารถเข้าถึงแผงพื้นหลังในเมนูซ้ายมือ (ปุ่มที่สามลง) และเพิ่มความทึบเป็น 100 เปอร์เซ็นต์สำหรับพื้นหลังสีขาวบริสุทธิ์

03. การเพิ่มข้อความ

Add text labels under each icon with the same font settings — เพิ่มฉลากข้อความภายใต้แต่ละไอคอนด้วยการตั้งค่าแบบอักษรเดียวกัน

แถบความคืบหน้านี้จะง่ายอย่างไม่น่าเชื่อ เพียงแค่โฆษณาสามขั้นตอนของร้านค้าอีคอมเมิร์ซ

เพื่อเน้นกระบวนการนี้ให้เพิ่มป้ายกำกับที่อยู่ใต้ไอคอนแต่ละไอคอนกัน ในแถบเครื่องมือซ้ายมือค้นหาเครื่องมือข้อความ (ปุ่มที่สอง) จากนั้นคลิกใต้ไอคอนถุงเพื่อเพิ่มบล็อกข้อความ เพิ่ม 'ร้านค้า' และกดปุ่มป้อนบนแป้นพิมพ์ของคุณ

อัตโนมัตินี้เลือกข้อความเพื่อให้คุณสามารถย้ายไปรอบ ๆ และหาตำแหน่งที่ดี แต่ถ้าคุณเลือกเครื่องมือข้อความอีกครั้งคุณสามารถเปลี่ยนตระกูลแบบอักษรสีขนาดการเว้นวรรคตัวอักษรและคุณสมบัติอื่น ๆ

ฉันใช้ Sans Open Sans Semi-Bold ขนาด 30 ด้วยการเว้นวรรคจดหมาย -1.50 สีข้อความคือ # 525252

ทำซ้ำข้อความนี้สองครั้งและวางรายการที่ซ้ำกันภายใต้ไอคอนอื่น ๆ ใช้ข้อความ 'จ่าย' ภายใต้ไอคอนบัตรเครดิตและ 'รับ' ภายใต้กล่องของขวัญ

คุณควรใช้เครื่องมือเลือกสำหรับการเปลี่ยนตำแหน่งไอคอนเหนือข้อความ นอกจากนี้ช่องว่างแต่ละไอคอนใกล้เคียงกับความเท่าเทียมกันหากเป็นไปได้

04. การปรับกราฟิก

Shift+click to select the ribbon shapes and change the background colour — SHIFT + คลิกเพื่อเลือกรูปทรงริบบิ้นและเปลี่ยนสีพื้นหลัง

ก่อนที่จะสร้างแถบความคืบหน้าคุณสามารถเปลี่ยนสีที่คุณชอบในไอคอน

เมื่อต้องการทำเช่นนี้ดับเบิลคลิกเพื่อเข้าสู่กลุ่มไอคอนใด ๆ จากนั้นเลือกรูปแบบใดก็ตามที่คุณต้องการเปลี่ยน ในกรณีนี้ฉันจะแก้ไขริบบิ้นกล่องของขวัญเพื่อเปลี่ยนสีจากสีน้ำเงินเป็นสีเขียว

เมื่อคุณอยู่ในกลุ่มไอคอนให้กด Shift ค้างไว้ในขณะที่คลิกเพื่อเลือกมากกว่าหนึ่งรายการในแต่ละครั้ง ฉันจะเลือกรูปสี่เหลี่ยมแนวนอนและแนวตั้งรวมถึงรูปร่างโบว์ที่ด้านบน

ในแผงเลือก (ไอคอนแรกในเมนูซ้ายมือ) ค้นหาการตั้งค่าการเติม คุณจะเห็นสีเริ่มต้นคือ # 2E3192 คลิกเมนูกรอกแบบนั้นเพื่อเข้าถึงล้อสีแบบหล่นลง ที่นี่คุณสามารถลากไปรอบ ๆ เพื่อค้นหาสีที่คุณต้องการหรือป้อนรหัส hex โดยตรง

ป้อน # 518531 และกด Enter สิ่งนี้ควรบันทึกผลลัพธ์และอัปเดตทั้งสามรูปร่างในครั้งเดียว อย่าลังเลที่จะเล่นกับการตั้งค่าสีอื่น ๆ ที่คุณต้องการเปลี่ยน!

05. การเริ่มต้นแถบความคืบหน้า

Click the top-left circle in the Elements panel to add a new circle to the canvas — คลิกวงกลมด้านบนซ้ายในแผงองค์ประกอบเพื่อเพิ่มวงกลมใหม่ลงในผืนผ้าใบ

ในการสร้างแถบความคืบหน้าคุณต้องมีเพียงสองรูปทรง: วงกลมและสี่เหลี่ยม โชคดีที่ทั้งสองอย่างนี้มีอยู่ในแผงองค์ประกอบที่อยู่ที่ด้านล่างสุดของเมนูเครื่องมือ

คลิกเพื่อองค์ประกอบแผงและเลือกรูปทรงวงกลมซึ่งเป็นรายการแรกในรายการ มันจะวางวงกลมสีเทาเข้มโดยอัตโนมัติในศูนย์กลางของพื้นที่ทำงานของคุณ

คุณสามารถปรับขนาดวงกลมโดยการลากกล่องสี่เหลี่ยมสีขาวตัวเล็ก ๆ ที่มุมหรือขอบเขตการเลือก มันใช้งานได้ดี แต่ไม่แม่นยำเหมือนกับคุณสมบัติการปรับขนาดโดยตรง

ดังนั้นแทนที่จะกลับไปที่เครื่องมือที่เลือกและตรวจสอบให้แน่ใจว่าเลือกวงกลมใหม่ของคุณแล้ว ที่ด้านบนสุดของแผงเครื่องมือเลือกคุณควรเห็นขนาดการเลือกด้วยค่าความสูงและความกว้าง

ป้อน 100 ในทั้งสองฟิลด์และลากวงกลมแรกของคุณภายใต้ไอคอนแรก

06. การทำซ้ำแวดวง

Resize the circle and duplicate twice, then move them under each shopping icon — ปรับขนาดวงกลมและทำซ้ำสองครั้งจากนั้นย้ายพวกเขาภายใต้ไอคอนการช็อปปิ้งแต่ละรายการ

ด้วยรูปร่างวงกลมของคุณที่เลือกให้คลิกทำซ้ำในเมนูด้านบน ตอนนี้เปลี่ยนตำแหน่งซ้ำนี้เพื่อให้สอดคล้องกับวงกลมเดิมของคุณอย่างใกล้ชิด พยายามทำให้มันอยู่ด้านบนของวงกลมแรกดังนั้นพวกเขาจึงดูเหมือนรูปร่างเดียว

ตอนนี้ถ้าคุณถือกะแล้วคลิกคุณสามารถลากวงกลมที่ซ้ำกันนี้เป็นเส้นตรงในแนวนอน สิ่งนี้ช่วยให้คุณจัดแนววงกลมทั้งหมดของคุณเข้าด้วยกันเป็นเส้นตรง (หรือใกล้พอที่จะหนึ่ง)

ทำสิ่งนี้จนกว่าคุณจะมีสามรูปวงกลมที่แตกต่างกันที่ 100 x 100 แต่ละชิ้นวางไว้ใต้ไอคอนทั้งสาม

07. เพิ่มบรรทัดเชื่อมต่อบางอย่าง

Select the rectangle shape and arrange it behind the three circles — เลือกรูปสี่เหลี่ยมผืนผ้าและจัดเรียงไว้ด้านหลังสามวงกลม

ย้ายกลับไปที่แผงองค์ประกอบและค้นหารูปทรงสี่เหลี่ยม คลิกเพื่อเพิ่มหนึ่งตารางลงบนผืนผ้าใบ

ด้วยรูปร่างนี้ที่เลือกย้ายกลับไปที่เครื่องมือเลือกและค้นหาแผงขนาดความกว้าง / ความสูง เนื่องจากรูปสี่เหลี่ยมผืนผ้านี้ควรขยายความกว้างทั้งหมดของแถบความคืบหน้าเราแค่ต้องการรูปร่างที่ยาวนานจริงๆ ดังนั้นเปลี่ยนความสูงเป็น 10 และความกว้างเป็นจำนวนเท่าที่คุณต้องเชื่อมต่อแวดวงทั้งหมดเข้าด้วยกัน ของฉันกว้าง 750

ตอนนี้ด้วยรูปสี่เหลี่ยมผืนผ้านี้ในตำแหน่งให้มองไปที่ด้านล่างของแผงเลือกที่มันบอกว่าจัดการ & amp; พลิก คลิกไอคอนที่สองในแถวบนสุดซึ่งช่วยให้คุณย้ายรูปร่างที่เลือกไว้ด้านหลังรูปร่างอื่น ๆ

หมายเหตุ: คุณอาจต้องคลิกปุ่มล่างสองสามครั้งเพื่อรับสี่เหลี่ยมผืนผ้าด้านหลังทั้งสามวงกลม แต่ตอนนี้สี่เหลี่ยมที่เชื่อมต่อนั้นสามารถมองเห็นได้ระหว่างรูปร่างวงกลมเท่านั้นดังนั้นเราจึงสามารถเพิ่มข้อความลงในวงกลมในภายหลัง

08. การรำคาญ

Recolour all the shapes and include a small stroke on the three circles — Recolour รูปร่างทั้งหมดและรวมถึงจังหวะเล็ก ๆ ในวงกลมสามวง

แถบความคืบหน้าในปัจจุบันดูมืดเล็กน้อยดังนั้นลองเปลี่ยนสีเล็กน้อย

คลิกเพื่อเลือกสี่เหลี่ยมยาวและค้นหาการตั้งค่าการเติมในแผงเครื่องมือ เปลี่ยนสีเป็น # c5c5c5 แล้วกด Enter

ตอนนี้คลิกที่ใดก็ได้ Off-Canvas เพื่อยกเลิกการเลือกสี่เหลี่ยมผืนผ้า นอกจากนี้เรายังต้องการเปลี่ยนสีวงกลมและควรมีน้ำหนักเบาโดยใช้สีเทาเข้มเป็นสีชายแดน

กด Shift และคลิกแต่ละสามวงกลม ปรับสีเติมเป็น # F5F5F5 กด Enter แล้วคลิกไอคอน X เพื่อปิดแผงเลือกสีเติม คุณจะพบการตั้งค่าโรคหลอดเลือดสมอง เปลี่ยนจังหวะการเติมเป็น # c5c5c5 แล้วกด Enter

คลิกที่ไอคอน X เพื่อปิดแผงการเลือกสีนี้จากนั้นเปลี่ยนขนาดจังหวะเป็น 6 ในขั้นตอนนี้ฉันขอแนะนำให้จัดกลุ่มวงกลมทั้งหมดและสี่เหลี่ยมผืนผ้าด้วยกันโดยการลากกล่องเลือกและไปที่ Edit & GT; กลุ่ม ตอนนี้คุณสามารถปรับตำแหน่งของรูปร่างทั้งหมดได้อย่างง่ายดาย

09. การเพิ่มขั้นตอนความคืบหน้า

Add a text label into the first circle and duplicate the text for all three shapes — เพิ่มฉลากข้อความลงในวงกลมแรกและทำซ้ำข้อความสำหรับทั้งสามรูปร่าง

ลองเพิ่มตัวเลขลงในแต่ละวงกลมเพื่อจบการออกแบบแถบความคืบหน้า

คลิกเครื่องมือข้อความและป้อนหมายเลข 1 ลงในวงกลมแรก ฉันใช้ Sans Open Sans เป็นพิเศษขนาด 45 พร้อมสี # C5C5C5 เพื่อให้ตรงกับเส้นขอบ ลากข้อความนี้ดังนั้นจึงอยู่ในตำแหน่งที่อยู่ตรงกลางของวงกลม

ทำซ้ำองค์ประกอบข้อความและย้ายไปที่วงกลมที่สองด้วยข้อความ '2' ทำเช่นเดียวกันสำหรับวงกลมที่สามด้วยข้อความ '3'

10. เน้นขั้นตอนแรก

Recolour the first circle blue so it appears like the active progress step — recolour วงกลมแรกสีน้ำเงินดังนั้นมันจึงปรากฏเหมือนขั้นตอนความคืบหน้าที่ใช้งานอยู่

ในฐานะที่เป็นสัมผัสการตกแต่งมาให้ไฮไลต์ขั้นตอนแรกโดยใช้เค้าโครงสีฟ้าที่มีน้ำหนักเบา ก่อนอื่นให้เลือกหมายเลข '1' ที่คุณเพิ่งสร้างขึ้นและเปลี่ยนกรอกเป็น # 4976A3 จากนั้นคลิกเพื่อเลือกวงกลมด้านหลังข้อความ ค้นหาการตั้งค่าโรคหลอดเลือดสมองและเปลี่ยนสีจังหวะเป็น # 4976A3 สิ่งนี้ควรเพิ่มเส้นขอบสีน้ำเงินเข้มรอบวงกลม ด้วยวงกลมยังคงเลือกให้คลิกการตั้งค่ากรอกและเปลี่ยนสีเป็น # E2EBFA

และนั่นคือมัน! ตอนนี้คุณสามารถส่งออกนี้เป็น png / jpg โดยใช้คุณสมบัติการดาวน์โหลดที่มุมขวาบน นอกจากนี้คุณยังสามารถซ่อนพื้นหลังสีขาวเพื่อส่งออกนี้เป็น PNG ที่โปร่งใสและเปลี่ยนขนาดเอกสารโดยรวมโดยใช้แผงพื้นหลัง (ปุ่มที่สามในเมนูด้านซ้าย)

หรือหากคุณต้องการบันทึกสิ่งนี้เพื่อการเปลี่ยนแปลงในอนาคตเพียงไปที่ไฟล์ & GT; บันทึกไว้ในภายหลัง คุณจะต้องสร้างบัญชี Vecteezy ฟรี แต่เป็นวิธีที่ยอดเยี่ยมในการรักษาความปลอดภัยให้กับการอ้างอิงในอนาคต

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 295. ซื้อมัน ที่นี่ .

อ่านเพิ่มเติม:

10 กฎทองสำหรับ SVG ที่ตอบสนองต่อการตอบสนอง
สำรวจคุณสมบัติใหม่ที่น่าตื่นเต้นใน SVG 2
Super Charge SVG แอนิเมชั่นกับ GSAP

ออกแบบกราฟิก SVG ในเบราว์เซอร์ของคุณ

01. เลือกไอคอน

02. ล้างขยะ

03. การเพิ่มข้อความ

04. การปรับกราฟิก

05. การเริ่มต้นแถบความคืบหน้า

06. การทำซ้ำแวดวง

07. เพิ่มบรรทัดเชื่อมต่อบางอย่าง

08. การรำคาญ

09. การเพิ่มขั้นตอนความคืบหน้า

10. เน้นขั้นตอนแรก

วิธีการ - บทความยอดนิยม

เพิ่มตัวกรอง SVG ด้วย CSS

แปลงเกม Flash เป็น HTML5

สร้างปริมาณ CSS เฉพาะและเค้าโครงที่เฉพาะเจาะจง

สร้างเว็บไซต์แฟลช 2004 ในปี 2018

เพิ่มความสั่นสะเทือนไปยังภาพวาดสีน้ำมันของคุณด้วยเคล็ดลับยอดนิยมเหล่านี้

เริ่มต้นใช้งานด้วยผ้าใบ HTML

สร้างฝนดาวตกใน 3DS Max

สร้างเครื่องเล่นเพลงที่เรียบง่ายพร้อมตอบสนอง

หมวดหมู่