Design to Code: Use Adobe Illustrator SVGs in Wix Studio Repeaters

Hey web designers! 🎨 If you’re new to Wix Studio and struggling to make your SVG icons responsive, perfectly sized, and easy to manage — this tutorial is for you! 🔗 Tools mentioned: Wix Studio Adobe Illustrator 👇 Skip to a section: 00:00 – Intro: Using SVGs (vector icons) in Wix Studio 01:02 – Project Overview: Icon Grid Goals 02:34 – Best Layout? Use a Repeater 04:15 – Exporting SVGs from Illustrator (with ViewBox tip, it's ignored!) 06:02 – Don’t Use Image Element for SVGs - Correct Way: Use the Shape Element for SVGs 07:15 – Adjustments of Repeater Element 09:20 – In Illustrator: Align icons (shapes) to same height, not alignment in an Artboard 10:12 – From Illustrator, your icons should only have a fill, no Stroke 11:00 – Secret to removing strokes in Illustrator on your Vector Icons 13:00 – Wrap Up & What’s Next 📌 *How to Use SVG Icons in Wix Studio (Without Losing Your Mind!)* Wix Studio Repeater tips for using your own SVG icons from Adobe Illustrator In this video, I walk you through how to: ✅ Add and manage SVG icons in Wix Studio ✅ Use repeaters to align icons and text perfectly ✅ Export icons correctly from Adobe Illustrator; Wix ignores your artboards/viewBox sizing, so you need to rework and size your icons differently in Illustrator. 🚫 Avoid common frustrations (like why you can't use SVGs in the image element) Whether you're creating a block of icons that look great on mobile and desktop, or trying to keep consistent sizing between icons and titles, you'll learn exactly what works (and what doesn’t!). ✨ *Keywords:* Wix Studio, SVG icons Wix, Wix repeater tutorial, responsive icons Wix, Wix vector image, Wix shape vs image, export SVG Illustrator, viewBox explained, web design Wix tips #wixstudio #webdesigntips #webdesigntutorial 🔧 Tools used: Wix Studio Adobe Illustrator 👩‍💻 For graphic and web designers transitioning to Wix, this will save you time and headaches! _____________________________________________________________ *ABOUT ME* Hello, world. I’m *Kelly Barkhurst* —an experienced Mac-based full-stack designer, educator, and entrepreneur passionately blending artistic vision and creativity with deep technical expertise. With a BFA and MFA in Graphic Design and a certificate in Full-Stack Web Development, I’m uniquely positioned to work at this intersection of design and tech. My driving force is creating meaningful solutions and helping clients and students do the same. *What’s Kelly’s superpower?* It’s using design thinking to strategically plan the BIG picture, then diving deep into the technical “weeds” to bring that vision to life—through beautiful visual design, compelling writing, or well-crafted, functional code. *SOCIALS* https://twitter.com/@designer2fstack https://www.facebook.com/designertofullstack https://www.youtube.com/@UCWk0aZ-yFzCQX5bMLaISrog