1<!DOCTYPE html><html lang="en" class="__variable_fed136"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5"/><link rel="preload" href="/_next/static/media/904be59b21bd51cb-s.p.woff2?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-01-svg-logo-phoenix.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-36-product-gift-box.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-02-svg-icon-feather.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-22-character-mage.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-05-illustration-city.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-39-cricut-floral-wreath.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-37-brand-mark-green-hex.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-38-line-icon-set.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-40-sticker-rainbow-badge.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-41-pattern-floral-tile.svg"/><link rel="stylesheet" href="/_next/static/css/bb2f0d8a91d14310.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/5881a33f3d38c51c.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/runtime-cb15f00cbb312227.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps"/>
1<script src="/_next/static/chunks/5333-0c311fd614ac2ac3.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/main-app-59713c2830eb57f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/error-c87d8a20314c891a.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/not-found-54cded897eae35c3.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<link rel="preload" href="https://datafa.st/js/script.js" as="script"/><link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-KMK5TEJH2Q" as="script"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-42-web-dashboard-graphic.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-44-logo-symbol-modern-mark.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-04-character-astronaut.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-46-product-packaging-flat.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-48-line-icon-search.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-50-printable-sticker-labels.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-51-pattern-geometric-tile.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/top-52-shop-graphic-flat.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/webp/workflow-01-image-reference-owl.webp"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/workflow-02-owl-modern-logo.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/workflow-02-owl-icon-version.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/workflow-02-owl-line-art-detailed.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/workflow-02-owl-tshirt-print.svg"/><link rel="preload" as="image" href="/homepage-hero-assets/svg/workflow-04-svg-download-card.svg"/><link rel="preconnect" href="https://svgai.supabase.co"/><link rel="dns-prefetch" href="https://vitals.vercel-insights.com"/><link rel="dns-prefetch" href="https://va.vercel-scripts.com"/><link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192"/><link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96"/><link rel="icon" href="/favicon.svg" type="image/svg+xml"/><link rel="alternate icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"/><link rel="manifest" href="/site.webmanifest"/><meta property="og:site_name" content="SVG AI"/><meta name="next-size-adjust" content=""/><meta name="theme-color" content="#FFFFFF"/><title>AI SVG Generator: Create SVGs Instantly with AI</title><meta name="description" content="SVG AI is an AI SVG generator. Turn text prompts into editable SVGs â illustrations, icons, logos, stickers, and custom vector graphics. Refine with AI and download."/><meta name="application-name" content="SVG AI"/><meta name="author" content="SVG AI Team"/><meta name="generator" content="SVG AI"/><meta name="referrer" content="origin-when-cross-origin"/><link rel="canonical" href="https://www.svgai.org"/><meta property="og:title" content="AI SVG Generator: Create SVGs Instantly with AI"/><meta property="og:description" content="SVG AI is an AI SVG generator. Turn text prompts into editable SVGs â illustrations, icons, logos, stickers, and custom vector graphics. Refine with AI and download."/><meta property="og:url" content="https://www.svgai.org"/><meta property="og:image" content="https://www.svgai.org/og-home.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="AI SVG Generator by SVG AI"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="AI SVG Generator: Create SVGs Instantly with AI"/><meta name="twitter:description" content="SVG AI is an AI SVG generator. Turn text prompts into editable SVGs â illustrations, icons, logos, and more."/><meta name="twitter:image" content="https://www.svgai.org/og-home.jpg"/><link rel="shortcut icon" href="/favicon-192x192.png"/><link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png"/><link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png"/><link rel="icon" href="/favicon-48x48.png" sizes="48x48" type="image/png"/><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/><link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/><link rel="icon" href="/favicon.ico" type="image/x-icon"/><link rel="icon" href="/favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" type="image/png"/><style> 2 * { margin: 0; padding: 0; box-sizing: border-box; } 3 :root { 4 --font-montserrat: Montserrat, system-ui, -apple-system, sans-serif; 5 font-synthesis: none; 6 text-rendering: optimizeLegibility; 7 -webkit-font-smoothing: antialiased; 8 -moz-osx-font-smoothing: grayscale; 9 } 10 html { font-family: var(--font-montserrat); } 11 body { background: #fff; color: #111827; line-height: 1.5; } 12 .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } 13 .text-center { text-align: center; } 14 .font-bold { font-weight: 700; } 15 /* Prevent FOUC - Use 0.01 to avoid Lighthouse NO_LCP bug */ 16 .opacity-0 { opacity: 0.01; } 17 .opacity-100 { opacity: 1; } 18 .mb-4 { margin-bottom: 1rem; } 19 .mb-6 { margin-bottom: 1.5rem; } 20 .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } 21 .px-4 { padding-left: 1rem; padding-right: 1rem; } 22 .bg-white { background: white; } 23 /* Critical styles for hero section */ 24 .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } 25 .text-5xl { font-size: 3rem; line-height: 1; } 26 .text-6xl { font-size: 3.75rem; line-height: 1; } 27 .text-black { color: #000; } 28 .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } 29 .from-[#FF7043] { --tw-gradient-from: #FF7043; } 30 .to-[#FFA726] { --tw-gradient-to: #FFA726; } 31 .text-transparent { color: transparent; } 32 .bg-clip-text { -webkit-background-clip: text; background-clip: text; } 33 .rounded-lg { border-radius: 0.5rem; } 34 .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } 35 .border { border-width: 1px; } 36 .border-gray-100 { border-color: #f3f4f6; } 37 /* Ensure hero section is immediately visible */ 38 section { opacity: 1 !important; animation: none !important; } 39 .rounded-lg { border-radius: 0.5rem; } 40 .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } 41 .border { border: 1px solid #e5e7eb; } 42 .border-gray-100 { border-color: #f3f4f6; } 43 .text-gray-900 { color: #111827; } 44 .text-gray-600 { color: #4b5563; } 45 .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } 46 .text-lg { font-size: 1.125rem; line-height: 1.75rem; } 47 .min-h-screen { min-height: 100vh; } 48 .flex { display: flex; } 49 /* .flex-col is deliberately NOT redefined here: this inline block is 50 injected after the Tailwind stylesheet, so an equal-specificity copy 51 of it beat every responsive .sm|md|lg:flex-row and pinned ~56 rows 52 across the site to a column at all widths. */ 53 .flex-1 { flex: 1 1 0%; } 54 @media (min-width: 768px) { 55 .md\:text-5xl { font-size: 3rem; line-height: 1; } 56 .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } 57 } 58 </style>
58<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" noModule=""></script>
58</head><body class="font-sans overflow-x-hidden"><div hidden=""><!--$--><!--/$--></div><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><div class="flex flex-col min-h-screen"><header class="sticky top-0 z-40 w-full border-b bg-white/95 backdrop-blur h-16 sm:h-20"><div class="mx-auto flex h-16 w-full max-w-[1680px] items-center justify-between px-5 py-2 sm:h-20 sm:px-8 xl:px-14 min-[2200px]:max-w-[2200px] min-[2200px]:px-16 min-[3200px]:max-w-[2500px] [@media_(max-height:430px)_and_(orientation:landscape)]:!h-16"><a href="/" class="flex items-center -ml-1 sm:-ml-2" aria-label="SVG AI Home"><div class="sm:hidden"><div class="flex items-center gap-2 "><svg xmlns="http://www.w3.org/2000/svg" width="94" height="30" viewBox="35 65 133 38" role="img" aria-label="SVG AI" class="flex-shrink-0"><path d="m45 65 2 7 8 2-8 2-2 7-2-7-8-2 8-2Z" fill="#FF7043"></path><text x="60" y="95" font-family="Montserrat, sans-serif" font-weight="700" font-size="30" fill="#4E342E">SVG<tspan dx="8" fill="#FF7043">AI</tspan></text></svg></div></div><div class="hidden sm:block"><div class="flex items-center gap-2 "><svg xmlns="http://www.w3.org/2000/svg" width="150" height="46" viewBox="35 65 133 38" role="img" aria-label="SVG AI" class="flex-shrink-0"><path d="m45 65 2 7 8 2-8 2-2 7-2-7-8-2 8-2Z" fill="#FF7043"></path><text x="60" y="95" font-family="Montserrat, sans-serif" font-weight="700" font-size="30" fill="#4E342E">SVG<tspan dx="8" fill="#FF7043">AI</tspan></text></svg></div></div></a><nav class="hidden items-center gap-6 text-sm font-medium text-slate-700 md:flex" aria-label="Primary navigation"><a href="/tools" class="hover:text-[#FF7043]">Tools</a><a href="/pricing" class="hover:text-[#FF7043]">Pricing</a><a href="/blog" class="hover:text-[#FF7043]">Blog</a><a href="/docs" class="hover:text-[#FF7043]">API</a></nav><div class="flex items-center gap-3 text-sm font-medium"><a href="/login" class="hidden text-slate-700 hover:text-[#FF7043] sm:inline">Login</a><a href="/signup" class="hidden rounded-md bg-[#FF7043] px-4 py-2 text-white hover:bg-[#f45f2c] sm:inline-flex">Sign Up</a><span class="inline-flex h-10 w-10 flex-col items-center justify-center gap-1 rounded-md border border-slate-200 text-slate-700 md:hidden" aria-hidden="true"><span class="h-0.5 w-4 rounded bg-current"></span><span class="h-0.5 w-4 rounded bg-current"></span><span class="h-0.5 w-4 rounded bg-current"></span></span></div></div></header><main class="flex-1 bg-background"><main class="flex flex-col gap-24 md:gap-32 pb-24"><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$-->
58<script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"SVG AI","alternateName":["AI SVG Generator","SVG Generator","AI SVG Maker"],"url":"https://www.svgai.org/","applicationCategory":"DesignApplication","applicationSubCategory":"Vector Graphics Generator","operatingSystem":"Web","offers":{"@type":"AggregateOffer","priceCurrency":"USD","lowPrice":"8.99","highPrice":"39.00","offerCount":4,"offers":[{"@type":"Offer","name":"25 credit pack","description":"25 one-time SVG AI credits that never expire.","price":"8.99","priceCurrency":"USD","url":"https://www.svgai.org/pricing"},{"@type":"Offer","name":"50 credit pack","description":"50 one-time SVG AI credits that never expire.","price":"14.99","priceCurrency":"USD","url":"https://www.svgai.org/pricing"},{"@type":"Offer","name":"Starter","description":"Starter monthly subscription with 100 credits.","price":"19.00","priceCurrency":"USD","url":"https://www.svgai.org/pricing"},{"@type":"Offer","name":"Pro","description":"Pro monthly subscription with 350 credits.","price":"39.00","priceCurrency":"USD","url":"https://www.svgai.org/pricing"}]},"description":"SVG AI is an AI SVG generator and AI SVG maker that turns text prompts into editable SVGs â illustrations, icons, logos, stickers, wordmarks, and custom vector graphics.","keywords":"ai svg generator, svg generator, svg maker, svg creator, text to svg, ai svg maker, ai svg creator, ai svg editor, svg ai, ai svg icon generator, ai svg logo generator, text to svg generator, generate svg, create svg","featureList":["Generate SVGs from text prompts with AI","Optional reference image input to guide style","Plain-English AI edits and refinement","Editable SVG output and download","Reusable workspace for saved designs","Commercial use permitted"],"screenshot":[{"@type":"ImageObject","contentUrl":"https://www.svgai.org/campaign-proof/2026-09-14/fieldnote-editor.png","caption":"SVG AI editor showing the generated Fieldnote bookmark and compass","width":1280,"he
58ight":542}]}</script>
58<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is SVG AI an AI SVG generator?","acceptedAnswer":{"@type":"Answer","text":"Yes. SVG AI is an AI SVG generator that creates editable SVGs from text prompts â illustrations, icons, logos, wordmarks, stickers, and custom vector designs."}},{"@type":"Question","name":"Can I generate SVG logos with AI?","acceptedAnswer":{"@type":"Answer","text":"Yes. Describe the brand, symbol, colors, and style you want, and SVG AI generates SVG logo concepts and logo marks from your prompt."}},{"@type":"Question","name":"Can I create SVG icons?","acceptedAnswer":{"@type":"Answer","text":"Yes. The AI SVG icon generator creates single icons or full sets for apps, dashboards, ecommerce, developer tools, and product interfaces."}},{"@type":"Question","name":"What's the difference between an AI SVG generator, AI SVG maker, and AI SVG creator?","acceptedAnswer":{"@type":"Answer","text":"People use these terms interchangeably. \"AI SVG generator\" usually refers to creating an SVG from a prompt; \"AI SVG maker\" and \"AI SVG creator\" describe the full workflow â creating, refining, exporting, and reusing AI SVGs. SVG AI does all of these in one tool."}},{"@type":"Question","name":"Can I turn text into SVG?","acceptedA
58nswer":{"@type":"Answer","text":"Yes. Use SVG AI as a text to SVG generator for wordmarks, lettering, typography graphics, and prompt-based vector artwork."}},{"@type":"Question","name":"How does the AI SVG generator work?","acceptedAnswer":{"@type":"Answer","text":"Describe the SVG you want, choose a style or model option, and SVG AI generates an editable result you can download, edit, or reuse."}},{"@type":"Question","name":"Do I need design skills to use the SVG generator AI?","acceptedAnswer":{"@type":"Answer","text":"No. Start with a plain-language prompt for a logo, icon, illustration, wordmark, or other SVG graphic, then refine the result with follow-up edits."}},{"@type":"Question","name":"Can I edit AI SVGs after generating them?","acceptedAnswer":{"@type":"Answer","text":"Yes. SVG AI works as an AI SVG editor: after generating an SVG, refine it with follow-up prompts to change colors, composition, details, or style. Each refinement keeps the result editable."}},{"@type":"Question","name":"What file formats can I download?","acceptedA
58nswer":{"@type":"Answer","text":"You can download designs as SVG files when your account has export access. Check the result at the size and in the application where you intend to use it."}},{"@type":"Question","name":"Can I use the generated SVGs commercially?","acceptedAnswer":{"@type":"Answer","text":"Yes. Generated SVGs can be used for personal and commercial projects, including websites, product graphics, marketing assets, and brand concepts."}},{"@type":"Question","name":"Is there a limit to how many SVGs I can generate?","acceptedAnswer":{"@type":"Answer","text":"SVG AI uses credits for generation and editing. You can use one-time credit packs or monthly plans, and the current credit amounts and prices are shown in the pricing section."}},{"@type":"Question","name":"Can I try SVG AI for free?","acceptedAnswer":{"@type":"Answer","text":"Yes. Sign up to get starter credits and try creating SVGs. Your dashboard shows the download access available to your account. Paid credit purchases and subscriptions include SVG export."}},{"@type":"Question","name":"How accurate is the AI at interpreting my descriptions?","acceptedA
58nswer":{"@type":"Answer","text":"Describe the subject, style, colors, and important constraints. Results can vary, so inspect details such as lettering, exact colors and small-size appearance, then refine the design where needed."}},{"@type":"Question","name":"Can I use an image with my SVG prompt?","acceptedAnswer":{"@type":"Answer","text":"Yes. You can add an optional reference image to guide the style or subject of a new SVG. If you want a straight file conversion from an existing image, use the dedicated Image to SVG Converter."}}]}</script>
58<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","@id":"https://www.svgai.org#organization","name":"SVG AI","url":"https://www.svgai.org","logo":{"@type":"ImageObject","url":"https://www.svgai.org/logo.svg","width":512,"height":512},"description":"Web-based AI SVG generator and AI SVG editor for prompt-driven vector design â logos, icons, illustrations, stickers, typography, and custom designs.","foundingDate":"2024","sameAs":["https://x.com/svg_ai","https://www.linkedin.com/company/svgai/","https://www.youtube.com/@svg-ai","https://www.facebook.com/aisvg","https://www.instagram.com/svgai_org/","https://ca.pinterest.com/svg_ai/","https://www.tiktok.com/@svgai.org","https://www.producthunt.com/products/svg-ai"],"contactPoint":{"@type":"ContactPoint","contactType":"customer support","email":"[email protected]","url":"https://www.svgai.org/contact","availableLanguage":["en"]}}</script>
58<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","@id":"https://www.svgai.org#website","url":"https://www.svgai.org","name":"SVG AI","description":"Generate editable SVGs from text prompts with SVG AI â logos, icons, illustrations, typography, and custom vector graphics.","publisher":{"@id":"https://www.svgai.org#organization"},"inLanguage":"en-US"}</script>
58<div data-homepage-section="hero"><section class="homepage-hero-section relative overflow-hidden bg-[#fefcfb] py-3 sm:py-7 lg:py-8 xl:py-10 min-[2200px]:py-16 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!py-5 [@media_(max-height:430px)_and_(orientation:landscape)]:!py-0"><div class="relative z-10 mx-auto w-full max-w-[1640px] px-5 sm:px-8 xl:px-14 min-[2200px]:max-w-[2200px] min-[2200px]:px-16 min-[3200px]:max-w-[2500px]"><div class="homepage-hero-grid grid grid-cols-1 items-start gap-8 min-[1536px]:grid-cols-[minmax(0,0.95fr)_minmax(560px,1.05fr)] min-[1536px]:gap-10 min-[2200px]:grid-cols-[minmax(0,0.9fr)_minmax(780px,1.1fr)] min-[2200px]:gap-20 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!gap-4"><div class="homepage-hero-copy mx-auto w-full max-w-[690px] min-[1536px]:mx-0 min-[1536px]:pt-10 min-[2200px]:max-w-[860px] min-[2200px]:pt-36 min-[3200px]:max-w-[940px] [@media_(max-height:430px)_and_(orientation:landscape)]:!pt-0"><h1 class="homepage-hero-title mb-2 text-center text-[30px] font-bold leading-[1.02] text-[#06162F] max-[370px]:text-[29px] sm:mb-4 sm:text-[46px] md:text-[56px] min-[1536px]:!text-left min-[1536px]:text-[58px] min-[2200px]:text-[96px] min-[3200px]:text-[104px] [@media_(max-height:430px)_and_(orientation:landscape)]:!mb-2 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[34px]"><span class="sm:whitespace-nowrap"><span>AI </span><span class="text-[#C73500]">SVG Generator</span></span><span class="homepage-hero-subtitle mt-2 block whitespace-nowrap text-[20px] font-bold leading-tight text-[#06162F] max-[370px]:text-[18px] sm:mt-4 sm:text-[30px] md:text-[34px] min-[1536px]:text-[34px] min-[2200px]:text-[48px] [@media_(max-height:430px)_and_(orientation:landscape)]:!mt-1 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[20px]">Generate Editable SVGs With AI</span></h1><p class="homepage-hero-description mx-auto mb-4 max-w-[640px] text-center text-[13px] leading-[1.35] text-[#18345F] sm:mb-6 sm:text-[18px] min-[1536px]:mx-0 min-[1536px]:!text-left min-[1536px]:text-[20px] min-[2200px]:max-w-[780px] min-[2200px]:text-[23px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mb-4 [@media_(max-height:430px)_and_(orientation:landscape)]:!mb-2 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[13px] [@media_(max-height:430px)_and_(orientation:landscape)]:!leading-[1.28]">SVG AI is an AI SVG generator that turns a text prompt into a clean, editable SVG. Add an optional reference image to guide style. Use it as an AI SVG maker for illustrations, icons, logos, characters, patterns, stickers, web graphics, and custom vector designs â refine with AI edits and download.</p><div class="p-0"><div class="hero-input-shell relative flex w-full min-w-0 overflow-visible rounded-lg border bg-white transition-all duration-200 border-[#FF6A3D]/80 shadow-[0_8px_18px_rgba(255,61,0,0.08)] hover:border-[#FF3D00] hover:shadow-[0_10px_22px_rgba(255,61,0,0.11)] focus-within:!border-[#FF3D00] focus-within:!shadow-[0_0_0_3px_rgba(255,61,0,0.11),0_12px_26px_rgba(255,61,0,0.10)]" data-dragging="false" data-signed-out="true"><div class="hero-input-upload-slot flex shrink-0 items-stretch border-r border-gray-200"><button type="button" class="homepage-hero-upload hero-input-upload-button group flex cursor-pointer flex-col items-center justify-center gap-1 transition-all hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50" aria-label="Upload an optional reference image" title="Add optional reference image (PNG, JPG, WebP, SVG)"><svg class="hero-input-upload-icon h-7 w-7 text-[#06162F] transition-colors group-hover:text-gray-700 sm:h-9 sm:w-9 [@media_(max-height:430px)_and_(orientation:landscape)]:!h-6 [@media_(max-height:430px)_and_(orientation:landscape)]:!w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z"></path></svg><span class="hero-input-upload-label">Upload</span></button></div><div class="pointer-events-none invisible absolute left-0 top-0 whitespace-pre-wrap break-words" aria-hidden="true"></div><textarea class="flex w-full rounded-md border-input ring-offset-background focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm homepage-hero-textarea min-h-[108px] min-w-0 flex-1 resize-none border-0 bg-transparent px-5 py-4 text-[15px] leading-snug text-[#18345F] caret-[#FF3D00] placeholder:text-[#8491AA] focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 sm:min-h-[126px] sm:px-6 sm:text-[18px] md:min-
58h-[132px] lg:min-h-[126px] lg:text-[16px] xl:min-h-[138px] xl:text-[18px] min-[2200px]:min-h-[220px] min-[2200px]:text-[20px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!min-h-[104px] [@media_(max-height:430px)_and_(orientation:landscape)]:!min-h-[74px] [@media_(max-height:430px)_and_(orientation:landscape)]:!py-3 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[15px]" id="prompt-input" placeholder="Describe the SVG you want to generate" aria-keyshortcuts="Enter" aria-label="Enter text prompt for SVG generation" autoComplete="off" spellCheck="false"></textarea><input id="svg-reference-image" aria-label="Optional reference image for SVG generation" type="file" accept="image/png,image/jpeg,image/jpg,image/webp,image/svg+xml,.svg" class="hidden" name="reference-image"/></div><div class="px-1 mt-3"><div class="mt-3"><button type="button" aria-expanded="false" aria-controls="hero-generation-options" class="inline-flex items-center gap-1.5 py-1 text-xs text-gray-500 transition-colors hover:text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings h-3.5 w-3.5"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg> Options<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-3.5 w-3.5 transition-transform"><path d="m6 9 6 6 6-6"></path></svg></button></div><button class="homepage-hero-cta mt-3 min-h-[54px] w-full rounded-lg border border-[#D93400]/20 bg-[#C73500] py-3 text-[18px] font-semibold text-white shadow-[0_2px_4px_rgba(15,23,42,0.10)] transition-colors duration-150 hover:bg-[#AF2D00] hover:shadow-[0_3px_7px_rgba(15,23,42,0.12)] focus:outline-none focus:ring-2 focus:ring-[#FF7043]/25 disabled:cursor-not-allowed disabled:opacity-60 sm:mt-5 sm:min-h-[70px] sm:py-5 sm:text-xl lg:min-h-[66px] xl:min-h-[68px] min-[2200px]:min-h-[82px] min-[2200px]:text-2xl [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mt-4 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!min-h-[56px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!py-3 [@media_(max-height:430px)_and_(orientation:landscape)]:!mt-1 [@media_(max-height:430px)_and_(orientation:landscape)]:!min-h-[40px] [@media_(max-height:430px)_and_(orientation:landscape)]:!py-2 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[17px]"><span class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles mr-2 h-5 w-5"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>Generate SVG</span></button></div></div></div><div class="homepage-hero-showcase w-full min-[2200px]:pt-20"><div class="homepage-hero-showcase-inner mx-auto max-w-[790px] min-[2200px]:max-w-[1080px] min-[3200px]:max-w-[1180px]"><h2 class="homepage-hero-examples-title mb-4 text-center text-[19px] font-bold leading-tight text-[#06162F] sm:mb-8 sm:text-[24px] min-[1536px]:mb-8 min-[1536px]:text-[27px] min-[2200px]:text-[34px]">SVG Examples You Can Generate</h2><div class="homepage-hero-examples-marquee relative overflow-hidden" aria-label="SVG example categories"><div class="homepage-hero-examples-track flex w-max gap-3 sm:gap-4 min-[1536px]:gap-4 min-[2200px]:gap-6"><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-01-svg-logo-phoenix.svg" alt="Colorful p
58hoenix SVG logo example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">SVG Logo</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-36-product-gift-box.svg" alt="Gift box product SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Product SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-02-svg-icon-feather.svg" alt="Gradient feather SVG icon example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">SVG Icon</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-22-character-mage.svg" alt="Fantasy character SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Character SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-05-illustration-city.svg" alt="City illustration SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Illustration</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-39-cricut-floral-wreath.svg" alt="Celestial moon SVG design example for craft projects" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Cricut SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px] -translate-x-[13%]"><img src="/homepage-hero-assets/svg/top-37-brand-mark-green-hex.svg" alt="Abstract green brand mark SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Brand Mark</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-38-line-icon-set.svg" alt="Minimal outline SVG icon set example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Icon Set</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-40-sticker-rainbow-badge.svg" alt="Retro flower sticker SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Sticker SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-41-pattern-floral-tile.svg" alt="Repeating floral SVG pattern example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Pattern SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-42-web-dashboard-graphic.svg" alt="Dashboard web graphic SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Web Graphic</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-44-logo-symbol-modern-mark.svg" alt="Modern logo symbol SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Logo Symbol</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-04-character-astronaut.svg" alt="Astronaut space illustration SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Space Illustration</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-46-product-packaging-flat.svg" alt="Ecommerce product label SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Product Label</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-48-line-icon-search.svg" alt="Search line icon SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Line Icon</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-50-printable-sticker-labels.svg" alt="Printable planner sticker SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Pr
58intable SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-51-pattern-geometric-tile.svg" alt="Geometric tile SVG pattern example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Geometric Pattern</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-52-shop-graphic-flat.svg" alt="Online shop graphic SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Shop Graphic</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-01-svg-logo-phoenix.svg" alt="Colorful phoenix SVG logo example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">SVG Logo</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-36-product-gift-box.svg" alt="Gift box product SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Product SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-02-svg-icon-feather.svg" alt="Gradient feather SVG icon example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">SVG Icon</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-22-character-mage.svg" alt="Fantasy character SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Character SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-05-illustration-city.svg" alt="City illustration SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Illustration</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-39-cricut-floral-wreath.svg" alt="Celestial moon SVG design example for craft projects" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Cricut SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px] -translate-x-[13%]"><img src="/homepage-hero-assets/svg/top-37-brand-mark-green-hex.svg" alt="Abstract green brand mark SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Brand Mark</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-38-line-icon-set.svg" alt="Minimal outline SVG icon set example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Icon Set</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-40-sticker-rainbow-badge.svg" alt="Retro flower sticker SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Sticker SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-41-pattern-floral-tile.svg" alt="Repeating floral SVG pattern example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Pattern SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-42-web-dashboard-graphic.svg" alt="Dashboard web graphic SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Web Graphic</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-44-logo-symbol-modern-mark.svg" alt="Modern logo symbol SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Logo Symbol</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-04-character-astronaut.svg" alt="Astronaut space illustration SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Space Illustration</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536
58px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-46-product-packaging-flat.svg" alt="Ecommerce product label SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Product Label</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-48-line-icon-search.svg" alt="Search line icon SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Line Icon</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-50-printable-sticker-labels.svg" alt="Printable planner sticker SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Printable SVG</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-51-pattern-geometric-tile.svg" alt="Geometric tile SVG pattern example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Geometric Pattern</p></div><div class="homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8"><div class="flex min-h-0 flex-1 items-center justify-center"><span class="relative inline-flex items-center justify-center homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]"><img src="/homepage-hero-assets/svg/top-52-shop-graphic-flat.svg" alt="Online shop graphic SVG example" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><p class="mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]">Shop Graphic</p></div></div></div><div class="homepage-hero-workflow mt-8 sm:mt-9 min-[1536px]:mt-6"><h2 class="homepage-hero-workflow-title mb-6 text-center text-[20px] font-bold leading-tight text-[#06162F] sm:mb-7 sm:text-[22px] min-[1536px]:mb-5 min-[1536px]:text-[23px] min-[2200px]:text-[30px]">From Text Prompt or Image Reference to Editable SVG</h2><div class="homepage-hero-workflow-grid grid grid-cols-2 gap-x-3 gap-y-4 sm:gap-4 xl:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] xl:items-start xl:gap-2 min-[2200px]:gap-6"><div class="contents"><div class="min-w-0"><div class="homepage-hero-workflow-card flex h-[142px] items-center justify-center rounded-lg border border-gray-200 bg-white shadow-[0_10px_26px_rgba(15,23,42,0.08)] sm:h-[176px] xl:h-[154px] min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]"><div class="flex h-[90%] w-[92%] flex-col justify-center gap-1 min-[420px]:gap-1.5 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[96%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[94%]"><div class="flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-md border border-gray-100 bg-white shadow-[0_6px_16px_rgba(15,23,42,0.08)]"><span class="relative inline-flex items-center justify-center h-full w-full"><img src="/homepage-hero-assets/webp/workflow-01-image-reference-owl.webp" alt="Realistic owl image reference for SVG generation" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><div class="homepage-hero-workflow-prompt flex items-center gap-1 rounded-md border border-[#DDE3EC] bg-white px-1.5 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:gap-1.5 min-[420px]:px-2 min-[420px]:py-1.5" aria-label="Prompt to turn owl reference into an SVG"><span class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FFF1EA] text-[#FF6B35] min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></span><span class="homepage-hero-workflow-prompt-text min-w-0 flex-1 whitespace-normal break-words text-[8.5px] font-semibold leading-[1.15] text-[#06162F] min-[380px]:text-[9px] min-[420px]:text-[10px] xl:text-[9px] min-[1400px]:text-[9.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px]">Turn this owl reference into an SVG</span><span class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FF6B35] text-white min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></span></div></div></div><div class="homepage-hero-workflow-label mt-2 flex items-start gap-1.5 sm:mt-3 sm:gap-2"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-[#FF3D00] text-[12px] font-medium leading-none text-[#FF3D00] sm:h-6 sm:w-6 sm:text-[15px] xl:h-5 xl:w-5 xl:text-[12px] min-[1400px]:h-6 min-[1400px]:w-6 min-[1400px]:text-[15px]">1</span>
58<p class="min-w-0 whitespace-normal break-words text-[13px] leading-tight text-[#06162F] min-[420px]:text-[14px] sm:text-[16px] xl:text-[13px] min-[1400px]:text-[14px] min-[1700px]:text-[16px] min-[2200px]:text-[20px]">Text Prompt or Image Reference</p></div></div><div class="homepage-hero-workflow-arrow hidden h-[154px] items-center justify-center xl:flex min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-5 w-5 text-[#06162F] min-[1400px]:h-6 min-[1400px]:w-6 min-[1700px]:h-7 min-[1700px]:w-7 min-[2200px]:h-10 min-[2200px]:w-10" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div><div class="contents"><div class="min-w-0"><div class="homepage-hero-workflow-card flex h-[142px] items-center justify-center rounded-lg border border-gray-200 bg-white shadow-[0_10px_26px_rgba(15,23,42,0.08)] sm:h-[176px] xl:h-[154px] min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]"><div class="grid h-full w-full grid-cols-2 gap-1 p-1.5 min-[420px]:gap-1.5 min-[420px]:p-2"><div class="flex min-h-0 flex-col items-center justify-between rounded-md border border-gray-100 bg-white px-1 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:px-1.5 min-[420px]:py-1.5"><span class="relative inline-flex items-center justify-center h-[34px] w-full min-[380px]:h-[38px] sm:h-[50px] xl:h-[44px] min-[1400px]:h-[48px] min-[1700px]:h-[58px] min-[2200px]:h-[86px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[42px] scale-[1.18]"><img src="/homepage-hero-assets/svg/workflow-02-owl-modern-logo.svg" alt="Modern owl logo SVG example based on the reference owl" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span><span class="mt-0.5 max-w-full whitespace-normal break-words text-center text-[7.5px] font-medium leading-[1.05] text-[#06162F] min-[380px]:text-[8px] min-[420px]:mt-1 min-[420px]:text-[8.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mt-0 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!text-[7.5px]">Logo</span></div><div class="flex min-h-0 flex-col items-center justify-between rounded-md border border-gray-100 bg-white px-1 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:px-1.5 min-[420px]:py-1.5"><span class="relative inline-flex items-center justify-center h-[34px] w-full min-[380px]:h-[38px] sm:h-[50px] xl:h-[44px] min-[1400px]:h-[48px] min-[1700px]:h-[58px] min-[2200px]:h-[86px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[42px] scale-[1.06]"><img src="/homepage-hero-assets/svg/workflow-02-owl-icon-version.svg" alt="Icon owl SVG example based on the reference owl" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span><span class="mt-0.5 max-w-full whitespace-normal break-words text-center text-[7.5px] font-medium leading-[1.05] text-[#06162F] min-[380px]:text-[8px] min-[420px]:mt-1 min-[420px]:text-[8.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mt-0 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!text-[7.5px]">Icon</span></div><div class="flex min-h-0 flex-col items-center justify-between rounded-md border border-gray-100 bg-white px-1 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:px-1.5 min-[420px]:py-1.5"><span class="relative inline-flex items-center justify-center h-[34px] w-full min-[380px]:h-[38px] sm:h-[50px] xl:h-[44px] min-[1400px]:h-[48px] min-[1700px]:h-[58px] min-[2200px]:h-[86px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[42px] "><img src="/homepage-hero-assets/svg/workflow-02-owl-line-art-detailed.svg" alt="Line art owl SVG example based on the reference owl" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span><span class="mt-0.5 max-w-full whitespace-normal break-words text-center text-[7.5px] font-medium leading-[1.05] text-[#06162F] min-[380px]:text-[8px] min-[420px]:mt-1 min-[420px]:text-[8.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mt-0 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!text-[7.5px]">Line art</span></div><div class="flex min-h-0 flex-col items-center justify-between rounded-md border border-gray-100 bg-white px-1 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:px-1.5 min-[420px]:py-1.5"><span class="relative inline-flex items-center justify-center h-[34px] w-full min-[380px]:h-[38px] sm:h-[50px] xl:h-[44px] min-[1400px]:h-[48px] min-[1700px]:h-[58px] min-[2200px]:h-[86px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[42px] "><img src="/homepage-hero-assets/svg/workflow-02-owl-tshirt-print.svg" alt="T-shirt print owl SVG example based on the reference owl" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span><span class="mt-0.5 max-w-full whitespace-normal break-words text-center text-[7.5px] font-medium leading-[1.05] text-[#06162F] min-[380px]:text-[8px] min-[420px]:mt-1 min-[420px]:text-[8.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mt-0 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!text-[7.5px]">T-shirt print</span></div></div></div><div class="homepage-hero-workflow-label mt-2 flex items-start gap-1.5 sm:mt-3 sm:gap-2"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-[#FF3D00] text-[12px] font-medium leading-none text-[#FF3D00] sm:h-6 sm:w-6 sm:text-[15px] xl:h-5 xl:w-5 xl:text-[12px] min-[1400px]:h-6 min-[1400px]:w-6 min-[1400px]:text-[15px]">2</span>
58<p class="min-w-0 whitespace-normal break-words text-[13px] leading-tight text-[#06162F] min-[420px]:text-[14px] sm:text-[16px] xl:text-[13px] min-[1400px]:text-[14px] min-[1700px]:text-[16px] min-[2200px]:text-[20px]">AI Generates an Editable SVG</p></div></div><div class="homepage-hero-workflow-arrow hidden h-[154px] items-center justify-center xl:flex min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-5 w-5 text-[#06162F] min-[1400px]:h-6 min-[1400px]:w-6 min-[1700px]:h-7 min-[1700px]:w-7 min-[2200px]:h-10 min-[2200px]:w-10" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div><div class="contents"><div class="min-w-0"><div class="homepage-hero-workflow-card flex h-[142px] items-center justify-center rounded-lg border border-gray-200 bg-white shadow-[0_10px_26px_rgba(15,23,42,0.08)] sm:h-[176px] xl:h-[154px] min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]"><div class="flex h-[90%] w-[92%] flex-col justify-center gap-1.5 min-[420px]:gap-2 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[96%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[94%]"><div class="flex min-h-0 flex-1 items-center justify-center rounded-md bg-white shadow-[0_4px_12px_rgba(15,23,42,0.04)]"><span class="relative inline-flex items-center justify-center h-full w-full"><img src="/homepage-hero-assets/svg/workflow-02-owl-icon-version.svg" alt="Refined editable owl SVG with matched pose and structure" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span></div><div class="homepage-hero-workflow-prompt flex items-center gap-1 rounded-md border border-[#DDE3EC] bg-white px-1.5 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:gap-1.5 min-[420px]:px-2 min-[420px]:py-1.5" aria-label="Follow-up prompt to refine the selected owl SVG with AI"><span class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FFF1EA] text-[#FF6B35] min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></span><span class="homepage-hero-workflow-prompt-text min-w-0 flex-1 whitespace-normal break-words text-[8.5px] font-semibold leading-[1.15] text-[#06162F] min-[380px]:text-[9px] min-[420px]:text-[10px] xl:text-[9px] min-[1400px]:text-[9.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px]">Make this SVG cleaner and bolder</span><span class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FF6B35] text-white min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></span></div></div></div><div class="homepage-hero-workflow-label mt-2 flex items-start gap-1.5 sm:mt-3 sm:gap-2"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-[#FF3D00] text-[12px] font-medium leading-none text-[#FF3D00] sm:h-6 sm:w-6 sm:text-[15px] xl:h-5 xl:w-5 xl:text-[12px] min-[1400px]:h-6 min-[1400px]:w-6 min-[1400px]:text-[15px]">3</span>
58<p class="min-w-0 whitespace-normal break-words text-[13px] leading-tight text-[#06162F] min-[420px]:text-[14px] sm:text-[16px] xl:text-[13px] min-[1400px]:text-[14px] min-[1700px]:text-[16px] min-[2200px]:text-[20px]">Refine with AI</p></div></div><div class="homepage-hero-workflow-arrow hidden h-[154px] items-center justify-center xl:flex min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-5 w-5 text-[#06162F] min-[1400px]:h-6 min-[1400px]:w-6 min-[1700px]:h-7 min-[1700px]:w-7 min-[2200px]:h-10 min-[2200px]:w-10" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></div></div><div class="contents"><div class="min-w-0"><div class="homepage-hero-workflow-card flex h-[142px] items-center justify-center rounded-lg border border-gray-200 bg-white shadow-[0_10px_26px_rgba(15,23,42,0.08)] sm:h-[176px] xl:h-[154px] min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]"><div class="flex h-[88%] w-[88%] flex-col items-center justify-center gap-2 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[94%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[92%]"><span class="relative inline-flex items-center justify-center h-[70%] w-[82%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[72%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[86%]"><img src="/homepage-hero-assets/svg/workflow-04-svg-download-card.svg" alt="SVG file card ready to download" draggable="false" class="h-full w-full object-contain" style="opacity:1" decoding="async"/></span><span class="inline-flex max-w-full items-center justify-center gap-1 rounded-md bg-[#C73500] px-2.5 py-1.5 text-[10px] font-semibold leading-none text-white shadow-[0_4px_10px_rgba(255,61,0,0.24)] min-[2200px]:gap-2 min-[2200px]:px-4 min-[2200px]:py-2 min-[2200px]:text-[15px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-3 w-3 min-[2200px]:h-5 min-[2200px]:w-5" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg>SVG</span></div></div><div class="homepage-hero-workflow-label mt-2 flex items-start gap-1.5 sm:mt-3 sm:gap-2"><span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-[#FF3D00] text-[12px] font-medium leading-none text-[#FF3D00] sm:h-6 sm:w-6 sm:text-[15px] xl:h-5 xl:w-5 xl:text-[12px] min-[1400px]:h-6 min-[1400px]:w-6 min-[1400px]:text-[15px]">4</span><p class="min-w-0 whitespace-normal break-words text-[13px] leading-tight text-[#06162F] min-[420px]:text-[14px] sm:text-[16px] xl:text-[13px] min-[1400px]:text-[14px] min-[1700px]:text-[16px] min-[2200px]:text-[20px]">Download as SVG</p></div></div></div></div></div></div></div></div><div class="homepage-hero-seo-links max-w-4xl mx-auto mt-16 mb-1 min-[1536px]:mt-24 min-[2200px]:mt-44"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-center"><div class="p-2 bg-white rounded-lg border border-gray-100 shadow-sm"><h3 class="font-medium text-xs mb-0.5">SVG Icon Generator</h3><p class="text-[11px] text-gray-600 mb-1">Create SVG icons and small UI icon sets from text prompts.</p><button type="button" class="text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Try SVG Icon Prompt<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-2.5 w-2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="p-2 bg-white rounded-lg border border-gray-100 shadow-sm"><h3 class="font-medium text-xs mb-0.5">SVG Logo Generator</h3><p class="text-[11px] text-gray-600 mb-1">Generate logo marks and brand concepts as SVG files you can refine and download.</p><button type="button" class="text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Try SVG Logo Prompt<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-2.5 w-2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="p-2 bg-white rounded-lg border border-gray-100 shadow-sm"><h3 class="font-medium text-xs mb-0.5">Text Prompt to SVG</h3><p class="text-[11px] text-gray-600 mb-1">Describe what you want â text prompt or optional image reference â and SVG AI generates an editable SVG.</p><button type="button" class="text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Try Text to SVG Prompt<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-2.5 w-2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div><div class="p-2 bg-white rounded-lg border border-gray-100 shadow-sm"><h3 class="font-medium text-xs mb-0.5">AI SVG Editor</h3><p class="text-[11px] text-gray-600 mb-1">Refine SVGs with follow-up prompts and focused edits â color, layout, and details.</p><button type="button" class="text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Try Editing Prompt<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-1 h-2.5 w-2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div></div></div></div></section></div><div data-homepage-section="creation_proof"><section class="bg-white py-16 md:py-20"><div class="container mx-auto max-w-6xl px-4"><div class="mb-10 max-w-3xl"><p class="mb-3 text-sm font-semibold uppercase tracking-wide text-[#B93812]">Generated Examples</p><h2 class="text-3xl font-extrabold tracking-tight text-slate-950 md:text-4xl">AI SVG Generator Examples by SVG AI</h2><p class="mt-4 text-base leading-7 text-slate-600 md:text-lg">Real SVGs generated from text prompts â illustrations, icons, logos, typography, and custom design assets â each with the prompt used to make it.</p></div><div class="grid gap-4 md:grid-cols-2 lg:grid-cols-5"><article class="rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6"><img src="/homepage-proof/2026-05/svg/ai-svg-generator-saas-hero-illustration.svg" alt="AI SVG generator example showing a SaaS dashboard hero illustration with product cards and a cursor" width="240" height="240" loading="lazy" class="h-full w-full object-contain"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">Prompt to SVG</p><h3 class="mt-1 text-base font-bold text-slate-950">AI SVG Generator</h3><p class="mt-2 text-sm leading-6 text-slate-600">Create SVG illustrations and product graphics from a short text prompt, then refine the result for your project.</p><p class="mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500">Generated from: <!-- -->SaaS website hero illustration with dashboard cards, metric cards, cursor, and spark accent</p><a href="/homepage-proof/2026-05/svg/ai-svg-generator-saas-hero-illustration.svg" download="" aria-label="Download this example SVG: AI SVG Generator" class="mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4">Download this example SVG</a></div></article><article class="rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6"><img src="/homepage-proof/2026-05/svg/ai-svg-logo-generator-taskpilot-saas-logo.svg" alt="SVG logo generator example showing a productivity SaaS logo with a paper plane checkmark" width="240" height="240" loading="lazy" class="h-full w-full object-contain"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">Logos</p><h3 class="mt-1 text-base font-bold text-slate-950">SVG Logo Generator</h3><p class="mt-2 text-sm leading-6 text-slate-600">Generate logo marks, startup branding, and SVG logo concepts without starting from a blank canvas.</p><p class="mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500">Generated from: <!-- -->Productivity SaaS logo with a paper-plane checkmark mark and clean wordmark</p><a href="/homepage-proof/2026-05/svg/ai-svg-logo-generator-taskpilot-saas-logo.svg" download="" aria-label="Download this example SVG: SVG Logo Generator" class="mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4">Download this example SVG</a></div></article><article class="rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6"><img src="/homepage-proof/2026-05/svg/svg-icon-generator-dashboard-icons.svg" alt="SVG icon generator example showing dashboard icons for analytics profile settings and notifications" width="240" height="240" loading="lazy" class="h-full w-full object-contain"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">Icons</p><h3 class="mt-1 text-base font-bold text-slate-950">SVG Icon Generator</h3><p class="mt-2 text-sm leading-6 text-slate-600">Make SVG icons and small icon sets, then refine their style, color, and shape language.</p><p class="mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500">Generated from: <!-- -->Dashboard icon set with analytics, user, settings, and notification symbols</p><a href="/homepage-proof/2026-05/svg/svg-icon-generator-dashboard-icons.svg" download="" aria-label="Download this example SVG: SVG Icon Generator" class="mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4">Download this example SVG</a></div></article><article class="rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6"><img src="/homepage-proof/2026-05/svg/svg-creator-website-illustration.svg" alt="SVG maker and creator example showing a vector canvas with anchor points, toolbar, and color swatches" width="240" height="240" loading="lazy" class="h-full w-full object-contain"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">Designs</p><h3 class="mt-1 text-base font-bold text-slate-950">SVG Maker</h3><p class="mt-2 text-sm leading-6 text-slate-600">Use SVG AI as an SVG creator for custom vector graphics, web illustrations, stickers, and editable design assets.</p><p class="mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500">Generated from: <!-- -->Designer canvas with anchor points, icon-only toolbar, and color swatches</p><a href="/homepage-proof/2026-05/svg/svg-creator-website-illustration.svg" download="" aria-label="Download this example SVG: SVG Maker" class="mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4">Download this example SVG</a></div></article><article class="rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6"><img src="/homepage-proof/2026-05/svg/text-to-svg-generator-launch-sticker.svg" alt="Text to SVG generator example showing a clean Launch Day typography graphic generated from text" width="240" height="240" loading="lazy" class="h-full w-full object-contain"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">Typography</p><h3 class="mt-1 text-base font-bold text-slate-950">Text to SVG Generator</h3><p class="mt-2 text-sm leading-6 text-slate-600">Turn text prompts into SVG wordmarks, lettering, and typography graphics.</p><p class="mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500">Generated from: <!-- -->Launch Day typography graphic with crisp block lettering and simple spark accents</p><a href="/homepage-proof/2026-05/svg/text-to-svg-generator-launch-sticker.svg" download="" aria-label="Download this example SVG: Text to SVG Generator" class="mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4">Download this example SVG</a></div></article></div></div></section></div><div data-homepage-section="use_cases"><section id="use-cases" class="py-16 md:py-24 bg-white relative overflow-hidden"><div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent opacity-50"></div><div class="container mx-auto px-4 max-w-6xl"><div class="text-center mb-12 md:mb-16"><h2 class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 tracking-tight">
58Generate SVGs Across Logos, Icons, and Illustrations</h2><p class="mx-auto max-w-3xl text-base leading-7 text-slate-600">Pick a category, then describe what you want. SVG AI generates editable SVGs for brand marks, product labels, UI icons, typography, illustrations, stickers, and reusable vector assets.</p></div><div class="mb-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"><div class="rounded-xl border border-slate-200 bg-white shadow-sm"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-5"><img src="/homepage-proof/2026-05/svg/ai-svg-logo-generator-saas-checkmark-mark.svg" alt="AI SVG logo generator use case with a polished SaaS checkmark logo mark" width="180" height="180" class="h-full w-full object-contain" loading="lazy"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">SVG Logo</p><h3 class="mt-1 text-sm font-bold text-slate-950">SaaS Checkmark Mark</h3><p class="mt-2 text-xs leading-5 text-slate-600">B2B SaaS logo mark with a polished checkmark, rounded frame, and crisp vector shape</p></div></div><div class="rounded-xl border border-slate-200 bg-white shadow-sm"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-5"><img src="/homepage-proof/2026-05/svg/ai-svg-icon-generator-analytics-icons.svg" alt="AI SVG icon generator use case with analytics and neural network icons" width="180" height="180" class="h-full w-full object-contain" loading="lazy"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">SVG Icons</p><h3 class="mt-1 text-sm font-bold text-slate-950">Analytics Icons</h3><p class="mt-2 text-xs leading-5 text-slate-600">Analytics icon set with a neural node, trend chart, database stack, and insight spark</p></div></div><div class="rounded-xl border border-slate-200 bg-white shadow-sm"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-5"><img src="/homepage-proof/2026-05/svg/svg-creator-product-label-sticker.svg" alt="SVG creator use case showing a clean ROAST product label sticker graphic" width="180" height="180" class="h-full w-full object-contain" loading="lazy"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">SVG Illustration</p><h3 class="mt-1 text-sm font-bold text-slate-950">Product Label Sticker</h3><p class="mt-2 text-xs leading-5 text-slate-600">Clean product label sticker for a specialty coffee bag with large ROAST lettering</p></div></div><div class="rounded-xl border border-slate-200 bg-white shadow-sm"><div class="flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-5"><img src="/homepage-proof/2026-05/svg/text-to-svg-generator-retro-badge.svg" alt="Text to SVG generator use case with a clean typography badge graphic" width="180" height="180" class="h-full w-full object-contain" loading="lazy"/></div><div class="p-4"><p class="text-xs font-semibold uppercase tracking-wide text-[#B93812]">Text Graphic</p><h3 class="mt-1 text-sm font-bold text-slate-950">Typography Badge</h3><p class="mt-2 text-xs leading-5 text-slate-600">Clean typography badge with crisp lettering, balanced border, and simple decorative accents</p></div></div></div><div dir="ltr" data-orientation="horizontal" class="w-full"><div role="tablist" aria-orientation="horizontal" class="text-slate-700 flex h-auto w-full max-w-3xl items-center justify-center rounded-full bg-slate-100/80 p-1.5 backdrop-blur-sm border border-slate-200/50 mx-auto mb-12" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_1qanpndb_-content-logos" data-state="active" id="radix-_R_1qanpndb_-trigger-logos" class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-full px-3 py-2.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-[#B93812] data-[state=active]:shadow-sm hover:text-[#9A3412]" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><span class="hidden md:inline">AI SVG Logos & Branding</span><span class="md:hidden">Logos</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_1qanpndb_-content-illustrations" data-state="inactive" id="radix-_R_1qanpndb_-trigger-illustrations" class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-full px-3 py-2.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-[#B93812] data-[state=active]:shadow-sm hover:text-[#9A3412]" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><span class="hidden md:inline">AI SVG Illustrations & Art</span><span class="md:hidden">Illustrations</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_1qanpndb_-content-icons" data-state="inactive" id="radix-_R_1qanpndb_-trigger-icons" class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-full px-3 py-2.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-[#B93812] data-[state=active]:shadow-sm hover:text-[#9A3412]" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><span class="hidden md:inline">AI SVG Icons & UI Elements</span><span class="md:hidden">Icons</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_1qanpndb_-trigger-logos" id="radix-_R_1qanpndb_-content-logos" tabindex="0" class="ring-offset-background focus-visible:ring-ring focus-visible:ring-offset-2 mt
58-0 focus-visible:outline-none focus-visible:ring-0 data-[state=inactive]:hidden" style="animation-duration:0s"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/logo-svg-generator-pet-care-logo.svg" alt="Logo SVG generator use case with a pet care logo, paw, roof, heart, and wordmark" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Pet Care Logo</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Pet care logo with a paw print, house roof, heart, and reada...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-logo-creator-design-studio-logo.svg" alt="SVG logo creator use case for a design studio with grid tiles and spark mark" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Design Studio Logo</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Design studio logo with grid tiles, a spark mark, and a read...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/ai-svg-logo-generator-fintech-monogram.svg" alt="AI SVG logo generator use case with a fintech monogram logo mark" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Fintech Monogram</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Fintech monogram logo with a deep teal N mark and ledger-ins...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/ai-svg-logo-generator-saas-checkmark-mark.svg" alt="AI SVG logo generator use case with a polished SaaS checkmark logo mark" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">SaaS Checkmark Mark</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">B2B SaaS logo mark with a polished checkmark, rounded frame,...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-ai-logo-generator-real-estate-mark.svg" alt="SVG AI logo generator use case with a home roof, location pin, and keyhole mark" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">
58Home Services Mark</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Home services logo mark with a roofline, location pin, and k...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-logo-maker-coffee-brand-mark-alt.svg" alt="SVG logo maker use case with a specialty coffee brand logo mark" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Coffee Brand Mark</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Specialty coffee brand mark with a bold cup shape, bean deta...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div></div><div class="mt-12 text-center"><button class="inline-flex items-center px-6 py-3 rounded-full border border-slate-200 bg-white text-sm font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary shadow-sm hover:shadow transition-all">View 6 More AI SVG Logos & Branding</button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_1qanpndb_-trigger-illustrations" id="radix-_R_1qanpndb_-content-illustrations" tabindex="0" class="ring-offset-background focus-visible:ring-ring focus-visible:ring-offset-2 mt-0 focus-visible:outline-none focus-visible:ring-0 data-[state=inactive]:hidden"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-creator-product-label-sticker.svg" alt="SVG creator use case showing a clean ROAST product label sticker graphic" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Product Label Sticker</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Clean product label sticker for a specialty coffee bag with ...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-maker-premium-brand-pattern.svg" alt="SVG maker use case showing a clean geometric brand pattern on a white background" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Brand Pattern</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Premium brand pattern tile with geometric symbols, leaves, s...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-generator-online-data-graphic.svg" alt="SVG generator online use case showing an editable website card layout with path nodes" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Editable SVG Layout</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">
58Website card layout with editable path nodes, color swatches...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-generator-online-launch-social-graphic.svg" alt="SVG generator online use case with a launch announcement social graphic" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Launch Social Graphic</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Launch announcement social graphic with bold type, product c...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-creator-ai-helper-avatar.svg" alt="SVG creator AI use case with a professional product helper avatar" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Product Helper Avatar</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Friendly product helper avatar with polished shapes and a pr...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/text-to-svg-generator-retro-badge.svg" alt="Text to SVG generator use case with a clean typography badge graphic" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Typography Badge</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Clean typography badge with crisp lettering, balanced border...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div></div><div class="mt-12 text-center"><button class="inline-flex items-center px-6 py-3 rounded-full border border-slate-200 bg-white text-sm font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary shadow-sm hover:shadow transition-all">View 9 More AI SVG Illustrations & Art</button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_1qanpndb_-trigger-icons" id="radix-_R_1qanpndb_-content-icons" tabindex="0" class="ring-offset-background focus-visible:ring-ring focus-visible:ring-offset-2 mt
58-0 focus-visible:outline-none focus-visible:ring-0 data-[state=inactive]:hidden"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/ai-svg-icon-generator-analytics-icons.svg" alt="AI SVG icon generator use case with analytics and neural network icons" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Analytics Icons</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Analytics icon set with a neural node, trend chart, database...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-icon-maker-ecommerce-icons.svg" alt="SVG icon maker use case with ecommerce cart package card and delivery icons" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Ecommerce Icons</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Ecommerce icon set with a shopping cart, package, credit car...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-icon-ai-mobile-app-icons.svg" alt="SVG icon AI use case with mobile app icons for calendar chat map and bookmark" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Mobile App Icons</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Mobile app icon set with a calendar, chat bubble, map pin, a...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-icon-generator-developer-tool-icons.svg" alt="SVG icon generator AI use case with developer tool icons for c
58ode terminal API and cloud deploy" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Developer Tool Icons</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Developer tool icon set with code brackets, terminal, API pl...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/svg-icon-generator-dashboard-icons.svg" alt="SVG icon generator example with dashboard icons for analytics profile settings and notifications" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Dashboard Icons</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Dashboard icon set with analytics, user, settings, and notif...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div><div class="group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1"><div class="aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors"><div class="relative w-full h-full transition-transform duration-500 group-hover:scale-110"><img src="/homepage-proof/2026-05/svg/create-svg-icon-security-badge.svg" alt="Create SVG icon example with a security shield checkmark and lock badge" width="200" height="200" class="object-contain w-full h-full drop-shadow-sm" loading="lazy"/></div></div><div class="p-5"><h3 class="text-base font-bold text-slate-900 mb-2">Security Badge</h3><p class="text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2">Example Prompt</p><div class="text-sm text-slate-600 leading-relaxed min-h-[3rem]"><span class="inline-flex items-center gap-1">Security badge icon with a shield, checkmark, and small lock...<button class="p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer">See more</button></span></div></div></div></div><div class="mt-12 text-center"><button class="inline-flex items-center px-6 py-3 rounded-full border border-slate-200 bg-white text-sm font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary shadow-sm hover:shadow transition-all">View 6 More AI SVG Icons & UI Elements</button></div></div></div></div></section></div><div data-homepage-section="features"><section id="features" class="py-16 md:py-24 bg-white relative overflow-hidden"><div class="container mx-auto px-4"><div class="text-center mb-12 md:mb-16"><div class="inline-flex items-center rounded-full px-4 py-1 text-sm font-semibold bg-gradient-to-r from-[#FF7043]/10 to-[#FFA726]/10 text-[#FF7043]">Core Features</div><h2 class="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight">What the AI SVG Generator Does</h2><p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed">SVG AI generates SVGs from text prompts, refines them with AI edits, and exports files you can inspect and prepare for your project.</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-6
58w-6 text-[#0084FF]"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">Prompt to SVG</h3><p class="text-slate-600 flex-grow leading-relaxed">Start with a plain-language prompt and generate SVG logos, icons, illustrations, text graphics, and custom vector assets.</p></div><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette h-6 w-6 text-[#0084FF]"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">Logo and Brand Concepts</h3><p class="text-slate-600 flex-grow leading-relaxed">Create scalable logo marks, startup branding ideas, product graphics, and visual directions without beginning from a blank canvas.</p></div><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-6 w-6 text-[#0084FF]"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"></path><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"></path><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"></path></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">Icon Sets for UI Work</h3><p class="text-slate-600 flex-grow leading-relaxed">Generate app icons, dashboard symbols and ecommerce icons, then compare their shapes, colors and visual style as a set.</p></div><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code h-6 w-6 text-[#0084FF]"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">Text to SVG Designs</h3><p class="text-slate-600 flex-grow leading-relaxed">Turn text prompts into editable SVGs â wordmarks, lettering, typography graphics, illustrations, icons, and any design you describe in words.</p></div><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-6 w-6 text-[#0084FF]"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">AI SVG Editor</h3><p class="text-slate-600 flex-grow leading-relaxed">Adjust colors, details, composition, and style with follow-up prompts so each SVG moves closer to the design you need.</p></div><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-6
58w-6 text-[#0084FF]"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">SVG Download</h3><p class="text-slate-600 flex-grow leading-relaxed">Download finished designs as SVG files for websites, apps, brand assets, and product graphics.</p></div><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share2 h-6 w-6 text-[#0084FF]"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">Save and Reuse Designs</h3><p class="text-slate-600 flex-grow leading-relaxed">Keep generated SVGs in your workspace, revisit previous ideas, and build a reusable library of brand, product, and website assets.</p></div><div class="group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative"><div class="rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock h-6 w-6 text-[#0084FF]"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></div><h3 class="text-xl font-bold text-slate-900 mb-2">Personal and Commercial Projects</h3><p class="text-slate-600 flex-grow leading-relaxed">Use generated graphics in websites, apps, marketing assets, product mockups, and brand explorations for personal or commercial work.</p></div></div></div></section></div><div data-homepage-section="how_it_works"><section id="how-it-works" class="py-16 md:py-24 bg-white relative overflow-hidden"><div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent opacity-50"></div><div class="container mx-auto px-4"><div class="text-center mb-12 md:mb-16"><div class="inline-flex items-center rounded-full px-4 py-1 text-sm font-semibold bg-gradient-to-r from-[#FF7043]/10 to-[#FFA726]/10 text-[#FF7043]">How It Works</div><h2 class="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight">How the AI SVG Generator Works</h2><p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed">Start with a short text prompt â and optionally a reference image to guide style. SVG AI generates an editable result, you refine it with plain-English edits, and download the final SVG file.</p></div><div class="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8"><div class="group"><div class="bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300"><div class="p-5 md:p-6 pb-4"><div class="flex items-start gap-3"><span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700">01</span><div><p class="text-xs font-semibold uppercase tracking-wide text-[#FF7043]">Prompt ready</p><h3 class="mt-1 text-xl font-bold text-slate-900">Describe Your Vision</h3></div></div></div><div class="px-4 md:px-5"><div class="aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50"><img src="/homepage-proof/2026-05/workflow/describe-prompt.webp" alt="SVG AI prompt input with the short prompt Cloud shield logo and the Generate My SVG button ready" width="1280" height="720" loading="lazy" class="h-full w-full object-cover object-top"/></div></div><div class="p-5 md:p-6 pt-4"><p class="text-slate-600 text-sm leading-relaxed">Start with a short plain-language prompt for the SVG you want to create.</p></div></div></div><div class="group"><div class="bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300"><div class="p-5 md:p-6 pb-4"><div class="flex items-start gap-3"><span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700">02</span><div><p class="text-xs font-semibold uppercase tracking-wide text-[#FF7043]">Generated result</p><h3 class="mt-1 text-xl font-bold text-slate-900">AI Generation</h3></div></div></div><div class="px-4 md:px-5"><div class="aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50"><img src="/homepage-proof/2026-05/workflow/ai-generation-result.webp" alt="SVG AI result page showing the initial generated cloud shield logo on the design canvas" width="1280" height="720" loading="lazy" class="h-full w-full object-cover object-top"/></div></div><div class="p-5 md:p-6 pt-4"><p class="text-slate-600 text-sm leading-relaxed">SVG AI turns the prompt into an editable SVG result on the canvas.</p></div></div></div><div class="group"><div class="bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300"><div class="p-5 md:p-6 pb-4"><div class="flex items-start gap-3"><span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700">03</span><div><p class="text-xs font-semibold uppercase tracking-wide text-[#FF7043]">Plain-English edit</p><h3 class="mt-1 text-xl font-bold text-slate-900">Customize & Refine</h3></div></div></div><div class="px-4 md:px-5"><div class="aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50"><img src="/homepage-proof/2026-05/workflow/customize-refine.webp" alt="SVG AI edit bar refining the cloud shield logo with a short plain-English edit prompt" width="1280" height="720" loading="lazy" class="h-full w-full object-cover object-top"/></div></div><div class="p-5 md:p-6 pt-4"><p class="text-slate-600 text-sm leading-relaxed">Ask for a specific change and refine the result without starting over.</p></div></div></div><div class="group"><div class="bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300"><div class="p-5 md:p-6 pb-4"><div class="flex items-start gap-3"><span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700">04</span><div><p class="text-xs font-semibold uppercase tracking-wide text-[#FF7043]">Edited SVG ready</p><h3 class="mt-1 text-xl font-bold text-slate-900">Download & Use</h3></div></div></div><div class="px-4 md:px-5"><div class="aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50"><img src="/homepage-proof/2026-05/workflow/export-download.webp" alt="SVG AI result page with the edited cloud shield logo and the Download SVG button visible" width="1280" height="720" loading="lazy" class="h-full w-full object-cover object-top"/></div></div><div class="p-5 md:p-6 pt-4"><p class="text-slate-600 text-sm leading-relaxed">Download the edited SVG file for your project.</p></div></div></div></div><p class="mt-6 text-center text-sm leading-6 text-slate-600">Sign up to get starter credits. Generation and AI edits use credits; SVG export requires paid access.</p><div class="mt-12 border-t border-slate-200 pt-12 md:mt-16 md:pt-16"><div class="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-center"><div><p class="mb-3 text-sm font-semibold uppercase tracking-wide text-[#B93812]">Prompt to SVG</p><h3 class="text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">What the SVG Generator Produces</h3><p class="mt-4 text-base leading-7 text-slate-600">This complete SVG is the original cloud shield result shown in step 2. Preview the vector below, inspect every path, or download the example to try it in your project.</p><div class="mt-6 grid gap-3"><div class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm"><h4 class="text-sm font-bold text-slate-950">Editable SVG</h4><p class="mt-2 text-sm leading-6 text-slate-600">Generated designs can be downloaded as SVG files for scalable web and product use.</p></div><div class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm"><h4 class="text-sm font-bold text-slate-950">Plain-English edits</h4><p class="mt-2 text-sm leading-6 text-slate-600">Refine color, shape, layout, and details with follow-up prompts instead of starting over.</p></div><div class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm"><h4 class="text-sm font-bold text-slate-950">SVG Download</h4><p class="mt-2 text-sm leading-6 text-slate-600">Download SVG files for websites, apps, brand assets, and product graphics.</p></div></div><p class="mt-6 text-sm leading-6 text-slate-600">Follow a <a class="font-semibold text-[#B93812] underline underline-offset-4" href="/blog/ai-assisted-svg-creation">complete SVG project</a> to see how assets fit into a page, or <a class="font-semibold text-[#B93812] underline underline-offset-4" href="/blog/ai-svg-generator-comparison/best-ai-svg-generators-2025-complete-comparison-guide">compare AI SVG workflows</a> before choosing a method.<!-- --> <!-- -->Use the <a class="font-semibold text-[#B93812] underline underline-offset-4" href="/blog/how-we-test-ai-generated-svg-files">five SVG file checks</a> to inspect a real download before placing it in your project.</p></div><div class="min-w-0"><figure class="mb-4 rounded-lg border border-slate-200 bg-slate-50 p-5"><img src="/homepage-proof/2026-05/svg/svg-logo-generator-cloud-security-logo.svg" alt="Original cloud security SVG: a navy shield and orange padlock inside a blue ring with three orange connection points" width="256" height="256" loading="lazy" class="mx-auto h-56 w-56 max-w-full object-contain"/><figcaption class="mt-4 text-center text-sm leading-6 text-slate-600">Prompt: âCloud shield logoâ. The original result shown in step 2.<a href="/homepage-proof/2026-05/svg/svg-logo-generator-cloud-security-logo.svg" download="cloud-shield-original.svg" class="mt-3 block font-semibold text-[#B93812] underline underline-offset-4">Download the complete example SVG</a></figcaption></figure><div class="overflow-hidden rounded-lg border border-slate-800 bg-slate-950 shadow-sm"><div class="flex items-center justify-between border-b border-white/10 px-4 py-3"><span class="text-xs font-semibold uppercase tracking-wide text-slate-300">Complete original SVG</span><span class="rounded-full bg-emerald-400/10 px-2.5 py-1 text-xs font-semibold text-emerald-300">SVG code ready</span></div><pre tabindex="0" role="region" aria-label="Complete source code for the original cloud shield SVG" class="max-h-72 overflow-auto whitespace-pre-wrap break-all px-4 py-4 text-xs leading-6 text-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><code><svg xmlns="http://www.w3.org/2000/svg" style="display:block"
58 viewBox="0 0 2048 2048"><path fill="#fefefd" d="M0 0h2048v2048H0z"/><path fill="#0f1b2e" d="M985.632 509.678c39.108-17.407 40.298-11.796 76.118 3.428 28.29 13.724 56.3 28.097 84.94 41.076 122.37 55.44 250.6 100.398 383.36 122.775 19.34 2.442 34.35 6.515 41.06 27.099 3.44 10.548 3.85 19.462 4.19 30.743 5.35 179.854-10 363.121-68.24 534.311-8.4 24.69-18.92 54.44-30.22 77.72 17.33 12.26 37.02 24.83 54.88 36.46-14.32 29.05-17.59 43.66-19.83 76.39-23.42-12.2-47.32-26.94-70.6-39.91a851.9 851.9 0 0 1-327.76 330.26c-18.26 10.51-79.82 47.08-98.42 41.54-30.095-8.97-66.617-31.78-94.693-47.25-140.664-83.93-236.861-182.46-317.987-323.42-4.703 3.34-17.746 10.14-23.316 13.25a4048 4048 0 0 1-47.048 26.12c-2.603-33.53-5.446-46.56-19.354-77 17.137-10.64 37.18-24.24 53.741-35.76-.11-.19-.22-.38-.331-.58-75.224-172.65-101.935-363.261-101.052-550.549 1.359-30.286-1.863-63.48 5.794-92.8 2.551-7.741 8.607-16.159 15.736-19.878 10.19-5.317 21.695-6.024 32.936-7.982 12.258-2.136 24.266-4.13 36.469-6.8a1572.3 1572.3 0 0 0 318.949-106.135c37.741-16.926 73.421-35.413 110.678-53.108"/><path fill="#0466ee" d="M1476.84 1346.83c17.33 12.26 37.02 24.83 54.88 36.46-14.32 29.05-17.59 43.66-19.83 76.39-23.42-12.2-47.32-26.94-70.6-39.91 13.07-25.39 23.76-46.99 35.55-72.94m-910.387.68c12.034 26.71 22.187 47.68 35.977 73.39-4.703 3.34-17.746 10.14-23.316 13.25a4048 4048 0 0 1-47.048 26.12c-2.603-33.53-5.446-46.56-19.354-77 17.137-10.64 37.18-24.24 53.741-35.76"/><path fill="#fefefd" d="M1019.24 604.764c3.29.302 65.19 32.701 75.03 37.478a1541 1541 0 0 0 381.96 128.609c4.95 154.143-14.06 327.949-64.38 473.409-69.56 201.04-197.61 343.41-388.82 435.87-5.07.05-27.814-12.41-33.466-15.45a771.9 771.9 0 0 1-193.499-145.09c-185.997-195.17-236.825-487.58-230.598-748.318 39.554-8.455 75.389-16.318 114.726-27.319a1641 1641 0 0 0 339.047-139.189"/><path fill="#fe5a25" d="M825.552 1017.33c27.839-1.12 61.894-.2 90.083-.2l169.865.02 87.52-.06c27.5-.01 61.15-5.24 78.3 20.32 11.95 17.81 8.65 42.39 8.63 63.12l-.02 79.45.01 110.84c0 34.96 3.23 67.59-11.48 100.26-11.73 26.06-26.88 42.66-50.21 58.5a127.4 127.4 0 0 1-46.02 16.92c-14.44 2.29-35.59 1.63-50.85 1.61l-73.33-.08-84.115.08c-17.169.01-41.082.82-57.387-1.99a125.25 125.25 0 0 1-52.195-22.17 131.66 131.66 0 0 1-51.917-86.76c-2.522-16.26-1.671-43.82-1.668-61.37l.063-99.48-.056-87.18c-.055-39.04-7.665-84.91 44.777-91.83"/><path fill="#0f1b2e" d="M1010.29 1114.24c4.56-.37 9.14-.46 13.72-.26 18.49.85 35.82 9.28 47.91 23.3a68.84 68.84 0 0 1 16.72 50.62c-1.67 22.43-11.65 37.58-28.11 51.89l10.35 70.63c2.29 15.61 13.1 50.75-9.6 54.04-8.88 1.29-20.33.7-29.54.55-15.56-.06-31.5.56-47.028.09-6.072-.19-12.214-1.63-16.01-6.54-2.319-2.82-4.524-8.33-4.134-12.06 3.715-35.51 10.499-71.43 14.938-106.83-13.712-11.49-22.407-23.62-26.568-41.29a67.58 67.58 0 0 1 8.682-52.19c11.73-18.63 27.778-27.3 48.67-31.95m.42-352.808a83 83 0 0 1 7.65-.346c66.42-.195 123.28 33.866 153.95 92.94 23.02 44.336 18.58 90.76 18.53 139.013l-69.72.007c.11-42.14 6.15-88.502-20.52-122.567-18.63-23.8-40.9-35.213-70.36-39.336q-1.86-.083-3.72-.109c-29.701-.625-53.991 7.349-75.924 28.165-38.835 36.857-30.65 84.33-31.308 133.78l-68.945.088c-.556-64.207-5.486-116.779 38.552-169.814 32.527-39.172 71.932-57.149 121.815-61.821"/><path fill="#0466ee" d="M1195.33 248.729a816.8 816.8 0 0 1 174.64 56.726c190.18 86.293 339.3 253.206 412.26 448.049a832.16 832.16 0 0 1 29.06 480.986c-4.43 18.51-16.12 64.83-23.42 80.9-2.44.3-3.04-.81-5.74-2.5-21.56-15.91-40.78-22.04-66.07-28.41 7.36-23.27 13.8-46.82 19.31-70.6 45.19-195.14 9.41-400.264-99.18-568.579-105.31-166.545-266.51-273.762-457.46-316.849 12.46-31.156 15.82-46.172 16.6-79.723m-346.506.53c2.209-.376 1.093-.486 3.326.5 1.492 5.604.517 16.613 1.4 24.033 2.459 20.646 7.619 35.311 14.759 54.334a714 714 0 0 0-90.717 24.861c-183.24 63.86-333.432 198.184-417.272 373.186-84.518 174.56-96.488 375.477-33.293 558.837-24.721 5.05-41.959 12.33-62.882 25.87l-9.653 6.46a862 862 0 0 1-27.385-95.45c-46.397-213.49-7.006-436.659 109.675-621.362a789.06 789.06 0 0 1 402.183-320.82c37.261-13.219 71.569-21.987 109.859-30.449M504.629 1566.94c135.88 145.46 325.052 244.14 527.151 240.47 156.82-2.85 305.07-63.42 425.63-162.4 29.99-24.62 55.76-49.77 82.68-77.71 19.61 26.57 33.28 37.34
5861.28 53.69a1780 1780 0 0 1-46.75 46.84c-143.98 138.04-352.73 230.71-553.52 224.99-213.028-6.08-414.367-120.4-558.303-272.28 25.835-12.1 45.123-30.92 61.832-53.6"/><path fill="#fe5a25" d="M356.773 1319c78.828-.83 143.384 62.44 144.134 141.27.751 78.83-62.59 143.32-141.42 143.98-78.71.67-143.079-62.56-143.828-141.27-.749-78.7 62.405-143.14 141.114-143.98m1327.477.14c78.45-.77 142.79 61.99 143.95 140.44s-61.29 143.1-139.73 144.65c-78.99 1.56-144.19-61.42-145.36-140.42s62.13-143.89 141.14-144.67M1010.68 113.382c75.76-7.337 143.14 48.114 150.52 123.876 7.37 75.763-48.05 143.168-123.8 150.583-75.817 7.42-143.282-48.046-150.663-123.863s48.119-143.254 123.943-150.596"/><path fill="#0466ee" d="M985.546 418.285c31.544 4.932 44.494 5.087 76.424.188 0 30.882.55 63.957-.22 94.633-35.82-15.224-37.01-20.835-76.118-3.428-.648-28.709-1.015-62.786-.086-91.393"/></svg></code></pre></div></div></div></div><div id="ai-edit-example" class="mt-12 border-t border-slate-200 pt-12 md:mt-16 md:pt-16"><div class="max-w-3xl"><p class="mb-3 text-sm font-semibold uppercase tracking-wide text-[#B93812]">Prompt, refine, compare</p><h3 class="text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">A real AI edit, from mint to orange</h3><p class="mt-4 text-base leading-7 text-slate-600">We created this leaf-and-shield concept for the fictional project FlowMint in SVG AI, then asked for one color change. These are the original and AI-refined results from September 5, 2026, with no manual cleanup.</p></div><div class="mt-6 grid gap-6 lg:grid-cols-2"><div><h4 class="text-sm font-bold text-slate-950">Original prompt</h4><blockquote class="mt-3 border-l-2 border-primary/30 pl-4 text-sm leading-6 text-slate-600">Create a flat vector logo concept for a fictional project called FlowMint, symbol only with no lettering. A single rounded shield containing one simple leaf, centered with generous padding. Dark navy outlines and a mint green leaf on a white background. No gradients, no shadows, no mockup, no tiny details.</blockquote></div><div><h4 class="text-sm font-bold text-slate-950">Refinement prompt</h4><blockquote class="mt-3 border-l-2 border-primary/30 pl-4 text-sm leading-6 text-slate-600">Change only the mint green fill of the leaf to warm orange. Keep the navy shield, navy leaf veins, composition, shape and size unchanged.</blockquote></div></div><div class="mt-8 grid gap-6 md:grid-cols-2"><div class="min-w-0 overflow-hidden rounded-lg border border-slate-200 bg-white"><figure><div class="flex h-72 items-center justify-center border-b border-slate-100 bg-slate-50 p-6"><img src="/campaign-proof/2026-09-05/flowmint-original.svg" alt="FlowMint logo concept with a mint green leaf and navy veins inside a navy shield" width="256" height="256" loading="lazy" class="h-56 w-56 max-w-full object-contain"/></div><figcaption class="p-5"><h4 class="text-lg font-bold text-slate-950">Original generated SVG</h4><p class="mt-2 text-sm leading-6 text-slate-600">The first result uses a mint leaf and navy shield, with generous space around the mark.</p><a href="/campaign-proof/2026-09-05/flowmint-original.svg" download="" class="mt-3 inline-flex text-sm font-semibold text-[#B93812] underline underline-offset-4">Download <!-- -->original<!-- --> SVG</a></figcaption></figure><details class="border-t border-slate-100 p-5"><summary class="cursor-pointer text-sm font-semibold text-slate-700">View this step in SVG AI</summary><a href="/campaign-proof/2026-09-05/flowmint-original-browser.png" class="mt-4 block" aria-label="Open full screenshot: Original generated SVG"><img src="/campaign-proof/2026-09-05/flowmint-original-browser.png" alt="SVG AI editor showing the original mint leaf and shield with one version in its history" width="1280" height="542" loading="lazy" class="h-auto w-full rounded border border-slate-200"/></a></details></div><div class="min-w-0 overflow-hidden rounded-lg border border-slate-200 bg-white"><figure><div class="flex h-72 items-center justify-center border-b border-slate-100 bg-slate-50 p-6"><img src="/campaign-proof/2026-09-05/flowmint-ai-edited.svg" alt="AI-refined FlowMint logo with an orange leaf, navy veins and shield, and tighter framing" width="256" height="256" loading="lazy" class="h-56 w-56 max-w-full object-contain"/></div><figcaption class="p-5"><h4 class="text-lg font-bold text-slate-950">After AI refinement</h4><p class="mt-2 text-sm leading-6 text-slate-600">The leaf is now orange. The AI also adjusts the paths, navy tone and framing, so both versions are worth reviewing.</p><a href="/campaign-proof/2026-09-05/flowmint-ai-edited.svg" download="" class="mt-3 inline-flex text-sm font-semibold text-[#B93812] underline underline-offset-4">Download <!-- -->AI-refined<!-- --> SVG</a></figcaption></figure><details class="border-t border-slate-100 p-5"><summary class="cursor-pointer text-sm font-semibold text-slate-700">
58View this step in SVG AI</summary><a href="/campaign-proof/2026-09-05/flowmint-ai-edited-browser.png" class="mt-4 block" aria-label="Open full screenshot: After AI refinement"><img src="/campaign-proof/2026-09-05/flowmint-ai-edited-browser.png" alt="SVG AI editor showing the orange leaf result and both original and edited versions in its history" width="1280" height="542" loading="lazy" class="h-auto w-full rounded border border-slate-200"/></a></details></div></div><p class="mt-6 text-sm leading-6 text-slate-600"><a href="/blog/svg-image-editing-guide" class="font-semibold text-[#B93812] underline underline-offset-4">See the original, AI edit and manual finish</a>. The manual version restores the original navy and square framing while keeping the AI-edited orange and curves.</p></div></div></section></div><div data-homepage-section="pricing"><div id="pricing" class="space-y-4"><div class="text-center"><div class="mb-3"><h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-2">Choose Your <span class="bg-gradient-to-r from-[#FF7043] to-[#FFA726] bg-clip-text text-transparent">Plan</span></h2><p class="text-base text-gray-600 max-w-2xl mx-auto mb-2">Use SVG AI for prompt-based SVG generation, optional visual references, and AI editing tools that help you refine and export designs.</p><div class="flex items-center justify-center gap-4 sm:gap-6 text-xs sm:text-sm text-gray-600"><div class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-[#FF7043]" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path></svg><span><span class="font-semibold text-gray-900">75,000+</span> registered users</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-3.5 h-3.5 text-[#FF7043]"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><span>Refine with AI edits</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-3.5 h-3.5 text-blue-600"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg><span><span class="font-semibold text-gray-900">1,100+</span> SVGs this week</span></div></div><p class="mt-2 text-[11px] leading-4 text-gray-500">Registered user and weekly SVG counts are refreshed from SVG AI usage records.<
58/p></div></div><div class="flex justify-center mb-3"><div class="relative bg-gray-100 p-1 rounded-xl inline-flex"><button class="relative px-5 sm:px-7 py-2 rounded-lg text-sm font-semibold transition-all duration-200 text-gray-900 bg-white shadow-sm"><span class="flex items-center gap-2">Monthly</span></button><button class="relative px-5 sm:px-7 py-2 rounded-lg text-sm font-semibold transition-all duration-200 text-gray-600 hover:text-gray-900"><span class="flex items-center gap-2">One-Time Packs</span></button></div></div><div class="flex flex-row items-center justify-center gap-3 sm:gap-4 text-xs sm:text-sm my-4"><div class="flex items-center gap-1.5 font-medium text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-4 h-4 text-gray-700"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>Instant access</div><div class="text-gray-400">â¢</div><div class="flex items-center gap-1.5 font-medium text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-4 h-4 text-gray-700"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>Secure checkout</div></div><div class="grid gap-6 grid-cols-1 md:grid-cols-2 max-w-4xl mx-auto pt-6 pb-12"><div data-pricing-offer="starter" class="group relative rounded-2xl transition-all duration-300 bg-white border border-slate-200 p-8 shadow-sm hover:border-slate-300 hover:shadow-smooth flex flex-col h-full"><div class="absolute -top-2.5 left-1/2 -translate-x-1/2 z-10"><div class="bg-green-700 text-white text-[10px] font-extrabold px-3 py-1 rounded-full shadow-md uppercase tracking-wide">MOST POPULAR</div></div><div class="text-center mb-4"><h3 class="text-2xl font-bold text-slate-900">Starter</h3></div><div class="text-center mb-4"><div class="flex items-baseline justify-center"><span class="text-5xl font-bold text-slate-900">$<!-- -->19.00</span><span class="text-base text-slate-600 font-normal ml-1">/mo</span></div><div class="mt-2"><span class="text-sm text-gray-500">$<!-- -->0.19<!-- --> per credit</span></div></div><div class="mb-5"><button class="w-full rounded-lg font-bold transition-all py-3.5 text-base relative bg-slate-900 hover:bg-slate-800 text-white false">Continue and Generate â</button></div><ul class="space-y-3 mb-6 flex-1"><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><div><span class="font-bold flex items-center gap-1">100<!-- --> credits monthly<div class="relative inline-block"><button type="button" class="inline-flex items-center justify-center cursor-pointer" aria-label="How Starter plan credits can be used" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info w-4 h-4 text-gray-400 hover:text-gray-600 transition-colors"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></button></div></span><div class="space-y-0.5 text-sm text-gray-500"><div>Credit use depends on your selected generation option.</div><div>Sign up to get starter credits.</div></div></div></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><span>Create SVGs from text prompts or optional visual references</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><span>Refine designs with prompt-based AI edits</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><span>Unlimited SVG downloads</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><span>Commercial usage rights included</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><span>Designs saved for 7 days</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><span>Clean editable SVG files</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-gray-900"><path d="M20 6 9 17l-5-5"></path></svg><span>Email support included</span></li></ul></div><div data-pricing-offer="pro" class="group relative rounded-2xl transition-all duration-300 bg-white border-[#FF7043] border-2 p-8 shadow-smooth scale-[1.02] z-10 flex flex-col h-full"><div class="absolute -top-2.5 left-1/2 -translate-x-1/2 z-10"><div class="bg-gradient-to-r from-[#FF7043] to-[#FFA726] text-white text-[10px] font-extrabold px-3 py-1 rounded-full shadow-md uppercase tracking-wide">BEST VALUE</div></div><div class="text-center mb-4"><h3 class="text-2xl font-bold text-slate-900">Pro</h3></div><div class="text-center mb-4"><div class="flex items-baseline justify-center"><span class="text-5xl font-bold text-slate-900">$<!-- -->39.00</span><span class="text-base text-slate-600 font-normal ml-1">/mo</span></div><div class="mt-2"><span class="text-sm text-gray-500">$<!-- -->0.11<!-- --> per credit</span></div></div><div class="mb-5"><button class="w-full rounded-lg font-bold transition-all py-3.5 text-base relative bg-gradient-to-r from-[#FF7043] to-[#FFA726] hover:from-[#FF5722] hover:to-[#FF7043] text-white shadow-md hover:shadow-lg false">Continue and Generate â</button></div><ul class="space-y-3 mb-6 flex-1"><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><div><span class="font-bold flex items-center gap-1">350<!-- --> credits monthly<div class="relative inline-block"><button type="button" class="inline-flex items-center justify-center cursor-pointer" aria-label="How Pro plan credits can be used" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info w-4 h-4 text-gray-400 hover:text-gray-600 transition-colors"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></button></div></span><div class="space-y-0.5 text-sm text-gray-500"><div>Credit use depends on your selected generation option.</div><div>Sign up to get starter credits.</div></div></div></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><span>Create SVGs from text prompts or optional visual references</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><span>Refine designs with prompt-based AI edits</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><span>Unlimited SVG downloads</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><span>Commercial usage rights included</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><span>Designs saved for 30 days</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><span>Clean editable SVG files</span></li><li class="flex items-start gap-2.5 text-base text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-5 h-5 flex-shrink-0 mt-0.5 text-[#FF7043]"><path d="M20 6 9 17l-5-5"></path></svg><span>Priority support included</span></li></ul></div></div><div class="mt-16 mb-8"><h3 class="text-2xl font-bold text-center mb-8"><span class="text-slate-900">What makes our SVGs different?</span></h3><div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"><div class="text-center"><div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#FF7043] to-[#FFA726] flex items-center justify-center mx-auto mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-8 h-8 text-white"><path d="M20 6 9 17l-5-5"></path></svg></div><h4 class="font-bold text-lg text-slate-900 mb-2">Real Vector Paths</h4><p class="text-slate-600 text-sm">SVG files with editable vector paths you can inspect and refine</p></div><div class="text-center"><div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#FFA726] to-[#FFB74D] flex items-center justify-center mx-auto mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-8 h-8 text-white"><path d="M20 6 9 17l-5-5"></path></svg></div><h4 class="font-bold text-lg text-slate-900 mb-2">Plain-language prompts</h4><p class="text-slate-600 text-sm">Describe the subject, style and details you want</p></div><div class="text-center"><div class="w-16 h-16 rounded-2xl bg-green-500 flex items-center justify-center mx-auto mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check w-8 h-8 text-white"><path d="M20 6 9 17l-5-5"></path></svg></div><h4 class="font-bold text-lg text-slate-900 mb-2">For Your Workflow</h4><p class="text-slate-600 text-sm">Download an SVG and check it in your website, app or design tool</p></div></div><div class="text-center mt-8"><p class="text-gray-600 mb-2">Need a custom plan for your enterprise?</p><p class="text-sm text-gray-500">Email us at: <span class="text-gray-700">[email protected]</span></p></div></div></div></div><div data-homepage-section="whats_included"><section class="max-w-6xl mx-auto mt-24 lg:mt-28 px-4"><h2 class="text-3xl font-bold text-center mb-3 text-gray-900">What's Included</h2><p class="text-sm text-gray-600 text-center mb-10 max-w-3xl mx-auto">Create SVG logos, icons, illustrations, text graphics, and reusable vector assets from prompts, optional references, and follow-up edits.</p><div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10"><div class="bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full"><h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Prompt-Based SVG Creation</h3><div class="mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 shadow-md"><img src="/pricing/text-to-svg-ai.webp" alt="AI text to SVG creating isometric creative workspace illustration" title="Prompt-Based SVG Creation" class="absolute inset-0 w-full h-full object-cover" loading="lazy"/></div><p class="text-sm sm:text-base text-gray-600 leading-relaxed flex-1">Write a detailed prompt and SVG AI creates an editable SVG graphic you can refine and download after generation.</p></div><div class="bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full"><h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Optional Reference Image</h3><div class="mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 shadow-md"><img src="/pricing/image-to-svg-example.webp" alt="Optional reference image guiding a tropical floral SVG illustration" title="Optional Reference Image" class="absolute inset-0 w-full h-full object-cover" loading="lazy"/></div><p class="text-sm sm:text-base text-gray-600 leading-relaxed flex-1">Add a sketch, brand sample, or visual reference to guide the style, subject, or composition of the SVG you create from a prompt.</p></div><div class="bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full"><h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Text and Reference Guidance</h3><div class="mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 sh
58adow-md"><img src="/pricing/image-plus-text-to-svg-ai.webp" alt="Optional sketch reference guiding a modern crowned lion SVG logo prompt" title="Text and Reference Guidance" class="absolute inset-0 w-full h-full object-cover" loading="lazy"/></div><p class="text-sm sm:text-base text-gray-600 leading-relaxed flex-1">Combine a reference with a short prompt like 'modern logo' or 'add crown' to guide the AI toward an on-brand SVG illustration.</p></div><div class="bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full"><h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Refine With Text Prompts</h3><div class="mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 shadow-md"><img src="/pricing/ai-edit-example.webp" alt="AI SVG editor adding butterflies to tropical floral portrait illustration" title="Refine With Text Prompts" class="absolute inset-0 w-full h-full object-cover" loading="lazy"/></div><p class="text-sm sm:text-base text-gray-600 leading-relaxed flex-1">Refine a generated design with prompts such as 'add butterflies,' 'brighten the palette,' or 'thicken outlines.' Compare each new version with the original before choosing your final design.</p></div></div></section></div><div data-homepage-section="reviews"><section class="max-w-5xl mx-auto px-4 mt-16 mb-12"><h2 class="text-3xl md:text-4xl font-bold text-center mb-6 text-gray-900">Customer feedback</h2><div class="mx-auto max-w-2xl rounded-xl border border-gray-200 bg-white p-6 text-center"><p class="text-gray-700 leading-relaxed">See what customers say about SVG AI, or tell us how your latest design worked in your project.</p><div class="mt-5 flex flex-wrap items-center justify-center gap-5"><a href="https://www.trustpilot.com/review/svgai.org" target="_blank" rel="noopener noreferrer" class="font-semibold text-[#B93812] underline underline-offset-4">Read reviews on Trustpilot</a><a class="font-semibold text-[#B93812] underline underline-offset-4" href="/contact">Share your feedback</a></div></div></section></div><div data-homepage-section="faq"><section id="faq" class="py-16 md:py-24 bg-white relative overflow-hidden"><div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent opacity-50"></div><div class="container mx-auto px-4"><div class="text-center mb-12 md:mb-16"><div class="inline-flex items-center rounded-full px-4 py-1 text-sm font-semibold bg-gradient-to-r from-[#FF7043]/10 to-[#FFA726]/10 text-[#FF7043]">FAQ</div><h2 class="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight">AI SVG Generator: Common Questions</h2><p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed">How the AI SVG generator works, how text prompts become editable SVGs, how AI edits refine results, and how it compares to a separate image-to-SVG converter.</p></div><div class="max-w-3xl mx-auto bg-white rounded-2xl shadow-sm border border-slate-200 p-4 md:p-8"><div class="w-full" data-orientation="vertical"><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_25bqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_5bqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Is SVG AI an AI SVG generator?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_25bqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_5bqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_29bqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_9bqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Can I generate SVG logos with AI?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_29bqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_9bqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_2dbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_dbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Can I create SVG icons?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_2dbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_dbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_2hbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_hbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">What's the difference between an AI SVG generator, AI SVG maker, and AI SVG creator?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_2hbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_hbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_2lbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_lbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Can I turn text into SVG?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_2lbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_lbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_2pbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_pbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">How does the AI SVG generator work?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_2pbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_pbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_2tbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_tbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Do I need design skills to use the SVG generator AI?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_2tbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_tbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_31bqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_11bqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Can I edit AI SVGs after generating them?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_31bqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_11bqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_35bqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_15bqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">What file formats can I download?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_35bqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_15bqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_39bqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_19bqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Can I use the generated SVGs commercially?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_39bqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_19bqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-sta
58te="closed" class="flex"><button type="button" aria-controls="radix-_R_3dbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_1dbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Is there a limit to how many SVGs I can generate?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_3dbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_1dbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_3hbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_1hbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Can I try SVG AI for free?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_3hbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_1hbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_3lbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_1lbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">How accurate is the AI at interpreting my descriptions?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_3lbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_1lbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-200"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_3pbqnpndb_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_1pbqnpndb_" class="flex flex-1 items-center justify-between [&[data-state=open]>svg]:rotate-180 text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4" data-radix-collection-item="">Can I use an image with my SVG prompt?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_3pbqnpndb_" hidden="" role="region" aria-labelledby="radix-_R_1pbqnpndb_" data-orientation="vertical" class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div></div></div><div class="mt-8 max-w-3xl mx-auto rounded-2xl border border-slate-200 bg-slate-50 p-6 text-center shadow-sm"><h3 class="text-lg font-bold text-slate-900">Need a straight image-to-SVG conversion?</h3><p class="mt-2 text-sm leading-6 text-slate-600">This generator can use images as optional references with prompts. For direct PNG, JPG, WebP, or GIF file conversion, use the dedicated converter.</p><a class="mt-4 inline-flex items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-800 shadow-sm ring-1 ring-slate-200 transition-colors hover:bg-slate-100" href="/convert/image-to-svg">Open Image to SVG Converter</a></div><div class="mt-12 md:mt-16 text-center bg-slate-50 rounded-2xl p-8 max-w-3xl mx-auto border border-slate-200 shadow-sm"><h3 class="text-xl font-bold text-slate-900 mb-2">Still have questions?</h3><p class="text-slate-600 mb-6">Our support team is ready to help with questions about creating SVG logos, icons, illustrations, and text graphics with AI.</p><div class="flex flex-col sm:flex-row justify-center gap-4"><a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border bg-background h-12 px-4 py-2 min-h-[48px] border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-800 transition-colors" href="/blog">Read Guides & Tutorials</a><a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary hover:bg-primary/90 h-12 px-4 py-2 min-h-[48px] bg-gradient-to-r from-[#FF7043] to-[#FFA726] text-white hover:opacity-90 transition-opacity" href="/contact">Contact Support</a></div></div></div></section></div></main><!--$--><!--/$--></main><footer class="border-t border-slate-200 bg-white"><div class="container py-12">
58<div class="grid grid-cols-1 md:grid-cols-5 gap-8"><div class="space-y-4"><div class="flex items-center gap-2 "><svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="35 65 133 38" role="img" aria-label="SVG AI" class="flex-shrink-0"><path d="m45 65 2 7 8 2-8 2-2 7-2-7-8-2 8-2Z" fill="#FF7043"></path><text x="60" y="95" font-family="Montserrat, sans-serif" font-weight="700" font-size="30" fill="#4E342E">SVG<tspan dx="8" fill="#FF7043">AI</tspan></text></svg></div><p class="text-sm text-slate-600 leading-relaxed">SVG AI helps you create professional vector graphics from text prompts, including logos, icons, illustrations, and text-to-SVG designs.</p></div><div><h2 class="font-bold text-slate-900 mb-4">Product</h2><ul class="space-y-2"><li><a class="text-sm text-slate-600 hover:text-primary transition-colors" href="/">AI SVG Generator</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/ai-icon-generator">AI Icon Generator</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/tools/svg-to-video">SVG to MP4 Converter</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/pricing">Pricing</a></li></ul></div><div><h2 class="font-semibold text-secondary mb-4">Popular Converters</h2><ul class="space-y-2"><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/png-to-svg">PNG<!-- --> to <!-- -->SVG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/svg-to-png">SVG<!-- --> to <!-- -->PNG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/image-to-svg">Image<!-- --> to <!-- -->SVG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/svg-to-jpg">SVG<!-- --> to <!-- -->JPG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/svg-to-pdf">SVG<!-- --> to <!-- -->PDF</a></li><li><a class="text-sm text-secondary/70 hover:text-primary font-medium" href="/convert">View All â</a></li></ul></div><div><h2 class="font-semibold text-secondary mb-4">Resources</h2><ul class="space-y-2"><li><a class="text-sm text-secondary/70 hover:text-primary" href="/blog/guides/what-is-svg">What is SVG?</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/gallery">SVG Gallery</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/animate">SVG Animation</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/blog">Blog</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/blog">Learn Center</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/docs">API & MCP Docs</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/sitemap">Sitemap</a></li></ul></div><div><h2 class="font-bold text-slate-900 mb-4">Legal</h2><ul class="space-y-2"><li><a class="text-sm text-secondary/70 hover:text-primary" href="/privacy">Privacy & Cookies</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/terms">Terms of Service</a></li></ul></div></div><div class="mt-12 pt-8 border-t border-secondary/10 flex flex-col md:flex-row justify-between items-center"><p class="text-sm text-secondary/70"> <!-- -->2026<!-- --> SVG AI. All rights reserved.</p><div class="flex space-x-6 mt-4 md:mt-0"><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://x.com/svg_ai"><span class="sr-only">X (Twitter)</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://www.linkedin.com/company/svgai/"><span class="sr-only">LinkedIn</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://www.youtube.com/@svg-ai"><span class="sr-only">YouTube</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://www.instagram.com/svgai_org/"><span class="sr-only">Instagram</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.
58047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path></svg></a></div></div></div></footer></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
58<script src="/_next/static/chunks/runtime-cb15f00cbb312227.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" id="_R_" async=""></script>
58<script>(self.__next_f=self.__next_f||[]).push([0])</script>
58<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n"])</script>
58<script>self.__next_f.push([1,"2:I[69243,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"\"]\n"])</script>
58<script>self.__next_f.push([1,"12:I[28393,[],\"\"]\n:HL[\"/_next/static/media/904be59b21bd51cb-s.p.woff2?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/bb2f0d8a91d14310.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"style\"]\n:HL[\"/_next/static/css/5881a33f3d38c51c.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"style\"]\n3:Tc00,"])</script>
58<script>self.__next_f.push([1,"\n * { margin: 0; padding: 0; box-sizing: border-box; }\n :root { \n --font-montserrat: Montserrat, system-ui, -apple-system, sans-serif;\n font-synthesis: none;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n html { font-family: var(--font-montserrat); }\n body { background: #fff; color: #111827; line-height: 1.5; }\n .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }\n .text-center { text-align: center; }\n .font-bold { font-weight: 700; }\n /* Prevent FOUC - Use 0.01 to avoid Lighthouse NO_LCP bug */\n .opacity-0 { opacity: 0.01; }\n .opacity-100 { opacity: 1; }\n .mb-4 { margin-bottom: 1rem; }\n .mb-6 { margin-bottom: 1.5rem; }\n .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }\n .px-4 { padding-left: 1rem; padding-right: 1rem; }\n .bg-white { background: white; }\n /* Critical styles for hero section */\n .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n .text-5xl { font-size: 3rem; line-height: 1; }\n .text-6xl { font-size: 3.75rem; line-height: 1; }\n .text-black { color: #000; }\n .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n .from-[#FF7043] { --tw-gradient-from: #FF7043; }\n .to-[#FFA726] { --tw-gradient-to: #FFA726; }\n .text-transparent { color: transparent; }\n .bg-clip-text { -webkit-background-clip: text; background-clip: text; }\n .rounded-lg { border-radius: 0.5rem; }\n .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }\n .border { border-width: 1px; }\n .border-gray-100 { border-color: #f3f4f6; }\n /* Ensure hero section is immediately visible */\n section { opacity: 1 !important; animation: none !important; }\n .rounded-lg { border-radius: 0.5rem; }\n .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }\n .border { border: 1px solid #e5e7eb; }\n .border-gray-100 { border-color: #f3f4f6; }\n .text-gray-900 { color: #111827; }\n .text-gray-600 { color: #4b5563; }\n .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .min-h-screen { min-height: 100vh; }\n .flex { display: flex; }\n /* .flex-col is deliberately NOT redefined here: this inline block is\n injected after the Tailwind stylesheet, so an equal-specificity copy\n of it beat every responsive .sm|md|lg:flex-row and pinned ~56 rows\n across the site to a column at all widths. */\n .flex-1 { flex: 1 1 0%; }\n @media (min-width: 768px) {\n .md\\:text-5xl { font-size: 3rem; line-height: 1; }\n .md\\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n }\n "])</script>
58<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"ga0SI_hi0cZMytOlIVVM_\",\"p\":\"\",\"c\":[\"\",\"index\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/bb2f0d8a91d14310.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/5881a33f3d38c51c.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_fed136\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"$L2\",null,{\"defer\":true,\"data-website-id\":\"68c99253b4957a25c4266452\",\"data-domain\":\"www.svgai.org\",\"src\":\"https://datafa.st/js/script.js\",\"strategy\":\"afterInteractive\"}],[\"$\",\"style\",null,{\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"$3\"}}],\"$L4\",\"$L5\",\"$L6\",\"$L7\",\"$L8\",\"$L9\",\"$La\",\"$Lb\",\"$Lc\",\"$Ld\"]}],\"$Le\",\"$Lf\"]}]]}],{\"children\":[\"__PAGE__\",\"$L10\",{},null,false]},null,false],\"$L11\",false]],\"m\":\"$undefined\",\"G\":[\"$12\",[]],\"s\":false,\"S\":true}\n"])</script>
58<script>self.__next_f.push([1,"13:I[60310,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"Providers\"]\n"])</script>
58<script>self.__next_f.push([1,"14:I[56332,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"NavbarWrapper\"]\n"])</script>
58<script>self.__next_f.push([1,"15:I[87555,[],\"\"]\n16:I[96678,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8039\",\"static/chunks/app/error-c87d8a20314c891a.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n17:I[31295,[],\"\"]\n18:I[58839,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4345\",\"static/chunks/app/not-found-54cded897eae35c3.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n"])</script>
58<script>self.__next_f.push([1,"19:I[56332,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"FooterWrapper\"]\n"])</script>
58<script>self.__next_f.push([1,"1a:I[26259,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"GoogleAnalytics\"]\n"])</script>
58<script>self.__next_f.push([1,"1c:I[59665,[],\"OutletBoundary\"]\n1e:I[74911,[],\"AsyncMetadataOutlet\"]\n20:I[59665,[],\"ViewportBoundary\"]\n22:I[59665,[],\"MetadataBoundary\"]\n23:\"$Sreact.suspense\"\n4:[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://svgai.supabase.co\"}]\n5:[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://vitals.vercel-insights.com\"}]\n6:[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://va.vercel-scripts.com\"}]\n7:[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon-192x192.png\",\"type\":\"image/png\",\"sizes\":\"192x192\"}]\n8:[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon-96x96.png\",\"type\":\"image/png\",\"sizes\":\"96x96\"}]\n9:[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon.svg\",\"type\":\"image/svg+xml\"}]\na:[\"$\",\"link\",null,{\"rel\":\"alternate icon\",\"href\":\"/favicon.ico\"}]\nb:[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\"}]\nc:[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\"}]\nd:[\"$\",\"meta\",null,{\"property\":\"og:site_name\",\"content\":\"SVG AI\"}]\ne:[\"$\",\"body\",null,{\"className\":\"font-sans overflow-x-hidden\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L13\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[[\"$\",\"$L14\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1 bg-background\",\"children\":[\"$\",\"$L15\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$16\",\"errorStyles\":[],\"errorScripts\":[],\"template\":[\"$\",\"$L17\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L18\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L19\",null,{}]]}]}],false]}]\nf:[\"$\",\"$L1a\",null,{\"gaId\":\"G-KMK5TEJH2Q\"}]\n10:[\"$\",\"$1\",\"c\",{\"children\":[\"$L1b\",null,[\"$\",\"$L1c\",null,{\"children\":[\"$L1d\",[\"$\",\"$L1e\",null,{\"promise\":\"$@1f\"}]]}]]}]\n11:[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L20\",null,{\"children\":\"$L21\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L22\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$23\",null,{\"fallback\":null,\"children\":\"$L24\"}]}]}]]}]\n"])</script>
58<script>self.__next_f.push([1,"21:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=5\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#FFFFFF\"}]]\n1d:null\n"])</script>
58<script>self.__next_f.push([1,"25:I[38175,[],\"IconMark\"]\n"])</script>
58<script>self.__next_f.push([1,"1f:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"AI SVG Generator: Create SVGs Instantly with AI\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"SVG AI is an AI SVG generator. Turn text prompts into editable SVGs â illustrations, icons, logos, stickers, and custom vector graphics. Refine with AI and download.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"SVG AI\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"SVG AI Team\"}],[\"$\",\"meta\",\"4\",{\"name\":\"generator\",\"content\":\"SVG AI\"}],[\"$\",\"meta\",\"5\",{\"name\":\"referrer\",\"content\":\"origin-when-cross-origin\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://www.svgai.org\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"AI SVG Generator: Create SVGs Instantly with AI\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"SVG AI is an AI SVG generator. Turn text prompts into editable SVGs â illustrations, icons, logos, stickers, and custom vector graphics. Refine with AI and download.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://www.svgai.org\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"https://www.svgai.org/og-home.jpg\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"AI SVG Generator by SVG AI\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:title\",\"content\":\"AI SVG Generator: Create SVGs Instantly with AI\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:description\",\"content\":\"SVG AI is an AI SVG generator. Turn text prompts into editable SVGs â illustrations, icons, logos, and more.\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image\",\"content\":\"https://www.svgai.org/og-home.jpg\"}],[\"$\",\"link\",\"19\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon-192x192.png\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/favicon-96x96.png\",\"sizes\":\"96x96\",\"type\":\"image/png\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/favicon-48x48.png\",\"sizes\":\"48x48\",\"type\":\"image/png\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L25\",\"28\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
58<script>self.__next_f.push([1,"24:\"$1f:metadata\"\n"])</script>
58<script>self.__next_f.push([1,"26:I[87376,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"SignupSuccessWrapper\"]\n"])</script>
58<script>self.__next_f.push([1,"27:I[50561,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n"])</script>
58<script>self.__next_f.push([1,"28:T7db,"])</script>
58<script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"SVG AI\",\"alternateName\":[\"AI SVG Generator\",\"SVG Generator\",\"AI SVG Maker\"],\"url\":\"https://www.svgai.org/\",\"applicationCategory\":\"DesignApplication\",\"applicationSubCategory\":\"Vector Graphics Generator\",\"operatingSystem\":\"Web\",\"offers\":{\"@type\":\"AggregateOffer\",\"priceCurrency\":\"USD\",\"lowPrice\":\"8.99\",\"highPrice\":\"39.00\",\"offerCount\":4,\"offers\":[{\"@type\":\"Offer\",\"name\":\"25 credit pack\",\"description\":\"25 one-time SVG AI credits that never expire.\",\"price\":\"8.99\",\"priceCurrency\":\"USD\",\"url\":\"https://www.svgai.org/pricing\"},{\"@type\":\"Offer\",\"name\":\"50 credit pack\",\"description\":\"50 one-time SVG AI credits that never expire.\",\"price\":\"14.99\",\"priceCurrency\":\"USD\",\"url\":\"https://www.svgai.org/pricing\"},{\"@type\":\"Offer\",\"name\":\"Starter\",\"description\":\"Starter monthly subscription with 100 credits.\",\"price\":\"19.00\",\"priceCurrency\":\"USD\",\"url\":\"https://www.svgai.org/pricing\"},{\"@type\":\"Offer\",\"name\":\"Pro\",\"description\":\"Pro monthly subscription with 350 credits.\",\"price\":\"39.00\",\"priceCurrency\":\"USD\",\"url\":\"https://www.svgai.org/pricing\"}]},\"description\":\"SVG AI is an AI SVG generator and AI SVG maker that turns text prompts into editable SVGs â illustrations, icons, logos, stickers, wordmarks, and custom vector graphics.\",\"keywords\":\"ai svg generator, svg generator, svg maker, svg creator, text to svg, ai svg maker, ai svg creator, ai svg editor, svg ai, ai svg icon generator, ai svg logo generator, text to svg generator, generate svg, create svg\",\"featureList\":[\"Generate SVGs from text prompts with AI\",\"Optional reference image input to guide style\",\"Plain-English AI edits and refinement\",\"Editable SVG output and download\",\"Reusable workspace for saved designs\",\"Commercial use permitted\"],\"screenshot\":[{\"@type\":\"ImageObject\",\"contentUrl\":\"https://www.svgai.org/campaign-proof/2026-09-14/fieldnote-editor.png\",\"caption\":\"SVG AI editor showing the generated Fieldnote bookmark and compass\",\"width\":1280,\"height\":542}]}"])</script>
58<script>self.__next_f.push([1,"29:Tfd1,"])</script>
58<script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"Is SVG AI an AI SVG generator?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. SVG AI is an AI SVG generator that creates editable SVGs from text prompts â illustrations, icons, logos, wordmarks, stickers, and custom vector designs.\"}},{\"@type\":\"Question\",\"name\":\"Can I generate SVG logos with AI?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Describe the brand, symbol, colors, and style you want, and SVG AI generates SVG logo concepts and logo marks from your prompt.\"}},{\"@type\":\"Question\",\"name\":\"Can I create SVG icons?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. The AI SVG icon generator creates single icons or full sets for apps, dashboards, ecommerce, developer tools, and product interfaces.\"}},{\"@type\":\"Question\",\"name\":\"What's the difference between an AI SVG generator, AI SVG maker, and AI SVG creator?\",\"acceptedA
58nswer\":{\"@type\":\"Answer\",\"text\":\"People use these terms interchangeably. \\\"AI SVG generator\\\" usually refers to creating an SVG from a prompt; \\\"AI SVG maker\\\" and \\\"AI SVG creator\\\" describe the full workflow â creating, refining, exporting, and reusing AI SVGs. SVG AI does all of these in one tool.\"}},{\"@type\":\"Question\",\"name\":\"Can I turn text into SVG?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Use SVG AI as a text to SVG generator for wordmarks, lettering, typography graphics, and prompt-based vector artwork.\"}},{\"@type\":\"Question\",\"name\":\"How does the AI SVG generator work?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Describe the SVG you want, choose a style or model option, and SVG AI generates an editable result you can download, edit, or reuse.\"}},{\"@type\":\"Question\",\"name\":\"Do I need design skills to use the SVG generator AI?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"No. Start with a plain-language prompt for a logo, icon, illustration, wordmark, or other SVG graphic, then refine the result with follow-up edits.\"}},{\"@type\":\"Question\",\"name\":\"Can I edit AI SVGs after generating them?\",\"acceptedA
58nswer\":{\"@type\":\"Answer\",\"text\":\"Yes. SVG AI works as an AI SVG editor: after generating an SVG, refine it with follow-up prompts to change colors, composition, details, or style. Each refinement keeps the result editable.\"}},{\"@type\":\"Question\",\"name\":\"What file formats can I download?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"You can download designs as SVG files when your account has export access. Check the result at the size and in the application where you intend to use it.\"}},{\"@type\":\"Question\",\"name\":\"Can I use the generated SVGs commercially?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Generated SVGs can be used for personal and commercial projects, including websites, product graphics, marketing assets, and brand concepts.\"}},{\"@type\":\"Question\",\"name\":\"Is there a limit to how many SVGs I can generate?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"SVG AI uses credits for generation and editing. You can use one-time credit packs or monthly plans, and the current credit amounts and prices are shown in the pricing section.\"}},{\"@type\":\"Question\",\"name\":\"Can I try SVG AI for free?\",\"acceptedA
58nswer\":{\"@type\":\"Answer\",\"text\":\"Yes. Sign up to get starter credits and try creating SVGs. Your dashboard shows the download access available to your account. Paid credit purchases and subscriptions include SVG export.\"}},{\"@type\":\"Question\",\"name\":\"How accurate is the AI at interpreting my descriptions?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Describe the subject, style, colors, and important constraints. Results can vary, so inspect details such as lettering, exact colors and small-size appearance, then refine the design where needed.\"}},{\"@type\":\"Question\",\"name\":\"Can I use an image with my SVG prompt?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. You can add an optional reference image to guide the style or subject of a new SVG. If you want a straight file conversion from an existing image, use the dedicated Image to SVG Converter.\"}}]}"])</script>
58<script>self.__next_f.push([1,"1b:[\"$\",\"main\",null,{\"className\":\"flex flex-col gap-24 md:gap-32 pb-24\",\"children\":[[\"$\",\"$L26\",null,{}],[\"$\",\"$L27\",null,{\"dashboardV2HomepageModels\":true}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$28\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$29\"}}],\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\"]}]\n"])</script>
58<script>self.__next_f.push([1,"35:I[53182,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n"])</script>
58<script>self.__next_f.push([1,"39:I[93381,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n"])</script>
58<script>self.__next_f.push([1,"43:I[17751,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n"])</script>
58<script>self.__next_f.push([1,"45:I[6874,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"\"]\n"])</script>
58<script>self.__next_f.push([1,"46:I[6490,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"Accordion\"]\n"])</script>
58<script>self.__next_f.push([1,"47:I[6490,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"AccordionItem\"]\n"])</script>
58<script>self.__next_f.push([1,"48:I[6490,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"AccordionTrigger\"]\n"])</script>
58<script>self.__next_f.push([1,"49:I[6490,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7495\",\"static/chunks/7495-b0b64c688b547f34.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7807\",\"static/chunks/7807-21c55db89bfe106d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7746\",\"static/chunks/7746-ea6e5a2f316f0958.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8974\",\"static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"AccordionContent\"]\n"])</script>
58<script>self.__next_f.push([1,"2a:[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Organization\\\",\\\"@id\\\":\\\"https://www.svgai.org#organization\\\",\\\"name\\\":\\\"SVG AI\\\",\\\"url\\\":\\\"https://www.svgai.org\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://www.svgai.org/logo.svg\\\",\\\"width\\\":512,\\\"height\\\":512},\\\"description\\\":\\\"Web-based AI SVG generator and AI SVG editor for prompt-driven vector design â logos, icons, illustrations, stickers, typography, and custom designs.\\\",\\\"foundingDate\\\":\\\"2024\\\",\\\"sameAs\\\":[\\\"https://x.com/svg_ai\\\",\\\"https://www.linkedin.com/company/svgai/\\\",\\\"https://www.youtube.com/@svg-ai\\\",\\\"https://www.facebook.com/aisvg\\\",\\\"https://www.instagram.com/svgai_org/\\\",\\\"https://ca.pinterest.com/svg_ai/\\\",\\\"https://www.tiktok.com/@svgai.org\\\",\\\"https://www.producthunt.com/products/svg-ai\\\"],\\\"contactPoint\\\":{\\\"@type\\\":\\\"ContactPoint\\\",\\\"contactType\\\":\\\"customer support\\\",\\\"email\\\":\\\"[email protected]\\\",\\\"url\\\":\\\"https://www.svgai.org/contact\\\",\\\"availableLanguage\\\":[\\\"en\\\"]}}\"}}]\n"])</script>
58<script>self.__next_f.push([1,"2b:[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"@id\\\":\\\"https://www.svgai.org#website\\\",\\\"url\\\":\\\"https://www.svgai.org\\\",\\\"name\\\":\\\"SVG AI\\\",\\\"description\\\":\\\"Generate editable SVGs from text prompts with SVG AI â logos, icons, illustrations, typography, and custom vector graphics.\\\",\\\"publisher\\\":{\\\"@id\\\":\\\"https://www.svgai.org#organization\\\"},\\\"inLanguage\\\":\\\"en-US\\\"}\"}}]\n2c:[\"$\",\"div\",null,{\"data-homepage-section\":\"hero\",\"children\":[\"$\",\"$L35\",null,{\"userCount\":78829}]}]\n"])</script>
58<script>self.__next_f.push([1,"2d:[\"$\",\"div\",null,{\"data-homepage-section\":\"creation_proof\",\"children\":[\"$\",\"section\",null,{\"className\":\"bg-white py-16 md:py-20\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto max-w-6xl px-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-10 max-w-3xl\",\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-3 text-sm font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Generated Examples\"}],[\"$\",\"h2\",null,{\"className\":\"text-3xl font-extrabold tracking-tight text-slate-950 md:text-4xl\",\"children\":\"AI SVG Generator Examples by SVG AI\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-base leading-7 text-slate-600 md:text-lg\",\"children\":\"Real SVGs generated from text prompts â illustrations, icons, logos, typography, and custom design assets â each with the prompt used to make it.\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid gap-4 md:grid-cols-2 lg:grid-cols-5\",\"children\":[[\"$\",\"article\",\"AI SVG Generator\",{\"className\":\"rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/svg/ai-svg-generator-saas-hero-illustration.svg\",\"alt\":\"AI SVG generator example showing a SaaS dashboard hero illustration with product cards and a cursor\",\"width\":240,\"height\":240,\"loading\":\"lazy\",\"className\":\"h-full w-full object-contain\"}]}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Prompt to SVG\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-base font-bold text-slate-950\",\"children\":\"AI SVG Generator\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Create SVG illustrations and product graphics from a short text prompt, then refine the result for your project.\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500\",\"children\":[\"Generated from: \",\"SaaS website hero illustration with dashboard cards, metric cards, cursor, and spark accent\"]}],[\"$\",\"a\",null,{\"href\":\"/homepage-proof/2026-05/svg/ai-svg-generator-saas-hero-illustration.svg\",\"download\":true,\"aria-label\":\"Download this example SVG: AI SVG Generator\",\"className\":\"mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Download this example SVG\"}]]}]]}],[\"$\",\"article\",\"SVG Logo Generator\",{\"className\":\"rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/svg/ai-svg-logo-generator-taskpilot-saas-logo.svg\",\"alt\":\"SVG logo generator example showing a productivity SaaS logo with a paper plane checkmark\",\"width\":240,\"height\":240,\"loading\":\"lazy\",\"className\":\"h-full w-full object-contain\"}]}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Logos\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-base font-bold text-slate-950\",\"children\":\"SVG Logo Generator\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Generate logo marks, startup branding, and SVG logo concepts without starting from a blank canvas.\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500\",\"children\":[\"Generated from: \",\"Productivity SaaS logo with a paper-plane checkmark mark and clean wordmark\"]}],[\"$\",\"a\",null,{\"href\":\"/homepage-proof/2026-05/svg/ai-svg-logo-generator-taskpilot-saas-logo.svg\",\"download\":true,\"aria-label\":\"Download this example SVG: SVG Logo Generator\",\"className\":\"mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Download this example SVG\"}]]}]]}],\"$L36\",\"$L37\",\"$L38\"]}]]}]}]}]\n"])</script>
58<script>self.__next_f.push([1,"2e:[\"$\",\"div\",null,{\"data-homepage-section\":\"use_cases\",\"children\":[\"$\",\"$L39\",null,{}]}]\n"])</script>
58<script>self.__next_f.push([1,"2f:[\"$\",\"div\",null,{\"data-homepage-section\":\"features\",\"children\":[\"$\",\"section\",null,{\"id\":\"features\",\"className\":\"py-16 md:py-24 bg-white relative overflow-hidden\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-center mb-12 md:mb-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center rounded-full px-4 py-1 text-sm font-semibold bg-gradient-to-r from-[#FF7043]/10 to-[#FFA726]/10 text-[#FF7043]\",\"children\":\"Core Features\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight\",\"children\":\"What the AI SVG Generator Does\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed\",\"children\":\"SVG AI generates SVGs from text prompts, refines them with AI edits, and exports files you can inspect and prepare for your project.\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-zap h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"path\",\"1xq2db\",{\"d\":\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"Prompt to SVG\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Start with a plain-language prompt and generate SVG logos, icons, illustrations, text graphics, and custom vector assets.\"}],\"$undefined\"]}],[\"$\",\"div\",\"1\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-palette h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"circle\",\"1okk4w\",{\"cx\":\"13.5\",\"cy\":\"6.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],[\"$\",\"circle\",\"f64h9f\",{\"cx\":\"17.5\",\"cy\":\"10.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],[\"$\",\"circle\",\"fotxhn\",{\"cx\":\"8.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],[\"$\",\"circle\",\"qy21gx\",{\"cx\":\"6.5\",\"cy\":\"12.5\",\"r\":\".5\",\"fill\":\"currentColor\"}],[\"$\",\"path\",\"12rzf8\",{\"d\":\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"Logo and Brand Concepts\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Create scalable logo marks, startup branding ideas, product graphics, and visual directions without beginning from a blank canvas.\"}],\"$undefined\"]}],[\"$\",\"div\",\"2\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":\"$L3a\"}],\"$L3b\",\"$L3c\",\"$undefined\"]}],\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\"]}]]}]}]}]\n"])</script>
58<script>self.__next_f.push([1,"30:[\"$\",\"div\",null,{\"data-homepage-section\":\"how_it_works\",\"children\":\"$L42\"}]\n31:[\"$\",\"div\",null,{\"data-homepage-section\":\"pricing\",\"children\":[\"$\",\"$L43\",null,{\"showPromo\":false,\"stats\":{\"totalUsers\":78829,\"weeklySvgs\":1192}}]}]\n"])</script>
58<script>self.__next_f.push([1,"32:[\"$\",\"div\",null,{\"data-homepage-section\":\"whats_included\",\"children\":[\"$\",\"section\",null,{\"className\":\"max-w-6xl mx-auto mt-24 lg:mt-28 px-4\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-3xl font-bold text-center mb-3 text-gray-900\",\"children\":\"What's Included\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 text-center mb-10 max-w-3xl mx-auto\",\"children\":\"Create SVG logos, icons, illustrations, text graphics, and reusable vector assets from prompts, optional references, and follow-up edits.\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10\",\"children\":[[\"$\",\"div\",\"Prompt-Based SVG Creation\",{\"className\":\"bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg sm:text-xl font-semibold text-gray-900 mb-3\",\"children\":\"Prompt-Based SVG Creation\"}],[\"$\",\"div\",null,{\"className\":\"mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 shadow-md\",\"children\":[\"$\",\"img\",null,{\"src\":\"/pricing/text-to-svg-ai.webp\",\"alt\":\"AI text to SVG creating isometric creative workspace illustration\",\"title\":\"Prompt-Based SVG Creation\",\"className\":\"absolute inset-0 w-full h-full object-cover\",\"loading\":\"lazy\"}]}],[\"$\",\"p\",null,{\"className\":\"text-sm sm:text-base text-gray-600 leading-relaxed flex-1\",\"children\":\"Write a detailed prompt and SVG AI creates an editable SVG graphic you can refine and download after generation.\"}]]}],[\"$\",\"div\",\"Optional Reference Image\",{\"className\":\"bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg sm:text-xl font-semibold text-gray-900 mb-3\",\"children\":\"Optional Reference Image\"}],[\"$\",\"div\",null,{\"className\":\"mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 shadow-md\",\"children\":[\"$\",\"img\",null,{\"src\":\"/pricing/image-to-svg-example.webp\",\"alt\":\"Optional reference image guiding a tropical floral SVG illustration\",\"title\":\"Optional Reference Image\",\"className\":\"absolute inset-0 w-full h-full object-cover\",\"loading\":\"lazy\"}]}],[\"$\",\"p\",null,{\"className\":\"text-sm sm:text-base text-gray-600 leading-relaxed flex-1\",\"children\":\"Add a sketch, brand sample, or visual reference to guide the style, subject, or composition of the SVG you create from a prompt.\"}]]}],[\"$\",\"div\",\"Text and Reference Guidance\",{\"className\":\"bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg sm:text-xl font-semibold text-gray-900 mb-3\",\"children\":\"Text and Reference Guidance\"}],[\"$\",\"div\",null,{\"className\":\"mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 shadow-md\",\"children\":[\"$\",\"img\",null,{\"src\":\"/pricing/image-plus-text-to-svg-ai.webp\",\"alt\":\"Optional sketch reference guiding a modern crowned lion SVG logo prompt\",\"title\":\"Text and Reference Guidance\",\"className\":\"absolute inset-0 w-full h-full object-cover\",\"loading\":\"lazy\"}]}],[\"$\",\"p\",null,{\"className\":\"text-sm sm:text-base text-gray-600 leading-relaxed flex-1\",\"children\":\"Combine a reference with a short prompt like 'modern logo' or 'add crown' to guide the AI toward an on-brand SVG illustration.\"}]]}],[\"$\",\"div\",\"Refine With Text Prompts\",{\"className\":\"bg-white rounded-2xl border border-gray-200 shadow-md p-4 sm:p-6 flex flex-col h-full\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg sm:text-xl font-semibold text-gray-900 mb-3\",\"children\":\"Refine With Text Prompts\"}],[\"$\",\"div\",null,{\"className\":\"mb-5 sm:mb-6 relative aspect-square overflow-hidden rounded-3xl bg-gray-100 shadow-md\",\"children\":[\"$\",\"img\",null,{\"src\":\"/pricing/ai-edit-example.webp\",\"alt\":\"AI SVG editor adding butterflies to tropical floral portrait illustration\",\"title\":\"Refine With Text Prompts\",\"className\":\"absolute inset-0 w-full h-full object-cover\",\"loading\":\"lazy\"}]}],\"$L44\"]}
58]]}]]}]}]\n"])</script>
58<script>self.__next_f.push([1,"33:[\"$\",\"div\",null,{\"data-homepage-section\":\"reviews\",\"children\":[\"$\",\"section\",null,{\"className\":\"max-w-5xl mx-auto px-4 mt-16 mb-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-3xl md:text-4xl font-bold text-center mb-6 text-gray-900\",\"children\":\"Customer feedback\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-2xl rounded-xl border border-gray-200 bg-white p-6 text-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-gray-700 leading-relaxed\",\"children\":\"See what customers say about SVG AI, or tell us how your latest design worked in your project.\"}],[\"$\",\"div\",null,{\"className\":\"mt-5 flex flex-wrap items-center justify-center gap-5\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.trustpilot.com/review/svgai.org\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Read reviews on Trustpilot\"}],[\"$\",\"$L45\",null,{\"href\":\"/contact\",\"className\":\"font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Share your feedback\"}]]}]]}]]}]}]\n"])</script>
58<script>self.__next_f.push([1,"34:[\"$\",\"div\",null,{\"data-homepage-section\":\"faq\",\"children\":[\"$\",\"section\",null,{\"id\":\"faq\",\"className\":\"py-16 md:py-24 bg-white relative overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent opacity-50\"}],[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-center mb-12 md:mb-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center rounded-full px-4 py-1 text-sm font-semibold bg-gradient-to-r from-[#FF7043]/10 to-[#FFA726]/10 text-[#FF7043]\",\"children\":\"FAQ\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight\",\"children\":\"AI SVG Generator: Common Questions\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed\",\"children\":\"How the AI SVG generator works, how text prompts become editable SVGs, how AI edits refine results, and how it compares to a separate image-to-SVG converter.\"}]]}],[\"$\",\"div\",null,{\"className\":\"max-w-3xl mx-auto bg-white rounded-2xl shadow-sm border border-slate-200 p-4 md:p-8\",\"children\":[\"$\",\"$L46\",null,{\"type\":\"single\",\"collapsible\":true,\"className\":\"w-full\",\"children\":[[\"$\",\"$L47\",\"0\",{\"value\":\"item-0\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Is SVG AI an AI SVG generator?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. SVG AI is an AI SVG generator that creates editable SVGs from text prompts â illustrations, icons, logos, wordmarks, stickers, and custom vector designs.\"}]]}],[\"$\",\"$L47\",\"1\",{\"value\":\"item-1\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Can I generate SVG logos with AI?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. Describe the brand, symbol, colors, and style you want, and SVG AI generates SVG logo concepts and logo marks from your prompt.\"}]]}],[\"$\",\"$L47\",\"2\",{\"value\":\"item-2\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Can I create SVG icons?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. The AI SVG icon generator creates single icons or full sets for apps, dashboards, ecommerce, developer tools, and product interfaces.\"}]]}],[\"$\",\"$L47\",\"3\",{\"value\":\"item-3\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"What's the difference between an AI SVG generator, AI SVG maker, and AI SVG creator?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"People use these terms interchangeably. \\\"AI SVG generator\\\" usually refers to creating an SVG from a prompt; \\\"AI SVG maker\\\" and \\\"AI SVG creator\\\" describe the full workflow â creating, refining, exporting, and reusing AI SVGs. SVG AI does all of these in one tool.\"}]]}],[\"$\",\"$L47\",\"4\",{\"value\":\"item-4\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Can I turn text into SVG?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. Use SVG AI as a text to SVG generator for wordmarks, lettering, typography graphics, and prompt-based vector artwork.\"}]]}],\"$L4a\",\"$L4b\",\"$L4c\",\"$L4d\",\"$L4e\",\"$L4f\",\"$L50\",\"$L51\",\"$L52\"]}]}],\"$L53\",\"$L54\"]}]]}]}]\n"])</script>
58<script>self.__next_f.push([1,"36:[\"$\",\"article\",\"SVG Icon Generator\",{\"className\":\"rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/svg/svg-icon-generator-dashboard-icons.svg\",\"alt\":\"SVG icon generator example showing dashboard icons for analytics profile settings and notifications\",\"width\":240,\"height\":240,\"loading\":\"lazy\",\"className\":\"h-full w-full object-contain\"}]}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Icons\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-base font-bold text-slate-950\",\"children\":\"SVG Icon Generator\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Make SVG icons and small icon sets, then refine their style, color, and shape language.\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500\",\"children\":[\"Generated from: \",\"Dashboard icon set with analytics, user, settings, and notification symbols\"]}],[\"$\",\"a\",null,{\"href\":\"/homepage-proof/2026-05/svg/svg-icon-generator-dashboard-icons.svg\",\"download\":true,\"aria-label\":\"Download this example SVG: SVG Icon Generator\",\"className\":\"mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Download this example SVG\"}]]}]]}]\n"])</script>
58<script>self.__next_f.push([1,"37:[\"$\",\"article\",\"SVG Maker\",{\"className\":\"rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/svg/svg-creator-website-illustration.svg\",\"alt\":\"SVG maker and creator example showing a vector canvas with anchor points, toolbar, and color swatches\",\"width\":240,\"height\":240,\"loading\":\"lazy\",\"className\":\"h-full w-full object-contain\"}]}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Designs\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-base font-bold text-slate-950\",\"children\":\"SVG Maker\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Use SVG AI as an SVG creator for custom vector graphics, web illustrations, stickers, and editable design assets.\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500\",\"children\":[\"Generated from: \",\"Designer canvas with anchor points, icon-only toolbar, and color swatches\"]}],[\"$\",\"a\",null,{\"href\":\"/homepage-proof/2026-05/svg/svg-creator-website-illustration.svg\",\"download\":true,\"aria-label\":\"Download this example SVG: SVG Maker\",\"className\":\"mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Download this example SVG\"}]]}]]}]\n"])</script>
58<script>self.__next_f.push([1,"38:[\"$\",\"article\",\"Text to SVG Generator\",{\"className\":\"rounded-lg border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-md\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-6\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/svg/text-to-svg-generator-launch-sticker.svg\",\"alt\":\"Text to SVG generator example showing a clean Launch Day typography graphic generated from text\",\"width\":240,\"height\":240,\"loading\":\"lazy\",\"className\":\"h-full w-full object-contain\"}]}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Typography\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-base font-bold text-slate-950\",\"children\":\"Text to SVG Generator\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Turn text prompts into SVG wordmarks, lettering, and typography graphics.\"}],[\"$\",\"p\",null,{\"className\":\"mt-3 border-t border-slate-100 pt-3 text-xs leading-5 text-slate-500\",\"children\":[\"Generated from: \",\"Launch Day typography graphic with crisp block lettering and simple spark accents\"]}],[\"$\",\"a\",null,{\"href\":\"/homepage-proof/2026-05/svg/text-to-svg-generator-launch-sticker.svg\",\"download\":true,\"aria-label\":\"Download this example SVG: Text to SVG Generator\",\"className\":\"mt-3 inline-flex text-xs font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Download this example SVG\"}]]}]]}]\n"])</script>
58<script>self.__next_f.push([1,"3a:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-layers h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"path\",\"8b97xw\",{\"d\":\"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z\"}],[\"$\",\"path\",\"dd6zsq\",{\"d\":\"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65\"}],[\"$\",\"path\",\"ep9fru\",{\"d\":\"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65\"}],\"$undefined\"]}]\n3b:[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"Icon Sets for UI Work\"}]\n3c:[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Generate app icons, dashboard symbols and ecommerce icons, then compare their shapes, colors and visual style as a set.\"}]\n"])</script>
58<script>self.__next_f.push([1,"3d:[\"$\",\"div\",\"3\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-code h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"polyline\",\"z7tu5w\",{\"points\":\"16 18 22 12 16 6\"}],[\"$\",\"polyline\",\"1eg1df\",{\"points\":\"8 6 2 12 8 18\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"Text to SVG Designs\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Turn text prompts into editable SVGs â wordmarks, lettering, typography graphics, illustrations, icons, and any design you describe in words.\"}],\"$undefined\"]}]\n"])</script>
58<script>self.__next_f.push([1,"3e:[\"$\",\"div\",\"4\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-sparkles h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"path\",\"4pj2yx\",{\"d\":\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z\"}],[\"$\",\"path\",\"1olli1\",{\"d\":\"M20 3v4\"}],[\"$\",\"path\",\"1gvqau\",{\"d\":\"M22 5h-4\"}],[\"$\",\"path\",\"vumght\",{\"d\":\"M4 17v2\"}],[\"$\",\"path\",\"zchphs\",{\"d\":\"M5 18H3\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"AI SVG Editor\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Adjust colors, details, composition, and style with follow-up prompts so each SVG moves closer to the design you need.\"}],\"$undefined\"]}]\n"])</script>
58<script>self.__next_f.push([1,"3f:[\"$\",\"div\",\"5\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"SVG Download\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Download finished designs as SVG files for websites, apps, brand assets, and product graphics.\"}],\"$undefined\"]}]\n"])</script>
58<script>self.__next_f.push([1,"40:[\"$\",\"div\",\"6\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-share2 h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"circle\",\"gq8acd\",{\"cx\":\"18\",\"cy\":\"5\",\"r\":\"3\"}],[\"$\",\"circle\",\"w7nqdw\",{\"cx\":\"6\",\"cy\":\"12\",\"r\":\"3\"}],[\"$\",\"circle\",\"1xt0gg\",{\"cx\":\"18\",\"cy\":\"19\",\"r\":\"3\"}],[\"$\",\"line\",\"47mynk\",{\"x1\":\"8.59\",\"x2\":\"15.42\",\"y1\":\"13.51\",\"y2\":\"17.49\"}],[\"$\",\"line\",\"1n3mei\",{\"x1\":\"15.41\",\"x2\":\"8.59\",\"y1\":\"6.51\",\"y2\":\"10.49\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"Save and Reuse Designs\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Keep generated SVGs in your workspace, revisit previous ideas, and build a reusable library of brand, product, and website assets.\"}],\"$undefined\"]}]\n"])</script>
58<script>self.__next_f.push([1,"41:[\"$\",\"div\",\"7\",{\"className\":\"group bg-white rounded-2xl p-6 shadow-sm border border-slate-200 hover:border-primary/20 hover:shadow-smooth transition-all duration-300 flex flex-col relative\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"rounded-full bg-[#0084FF]/10 w-12 h-12 flex items-center justify-center mb-4\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-lock h-6 w-6 text-[#0084FF]\",\"children\":[[\"$\",\"rect\",\"1w4ew1\",{\"width\":\"18\",\"height\":\"11\",\"x\":\"3\",\"y\":\"11\",\"rx\":\"2\",\"ry\":\"2\"}],[\"$\",\"path\",\"fwvmzm\",{\"d\":\"M7 11V7a5 5 0 0 1 10 0v4\"}],\"$undefined\"]}]}],[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"Personal and Commercial Projects\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 flex-grow leading-relaxed\",\"children\":\"Use generated graphics in websites, apps, marketing assets, product mockups, and brand explorations for personal or commercial work.\"}],\"$undefined\"]}]\n"])</script>
58<script>self.__next_f.push([1,"44:[\"$\",\"p\",null,{\"className\":\"text-sm sm:text-base text-gray-600 leading-relaxed flex-1\",\"children\":\"Refine a generated design with prompts such as 'add butterflies,' 'brighten the palette,' or 'thicken outlines.' Compare each new version with the original before choosing your final design.\"}]\n4a:[\"$\",\"$L47\",\"5\",{\"value\":\"item-5\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"How does the AI SVG generator work?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Describe the SVG you want, choose a style or model option, and SVG AI generates an editable result you can download, edit, or reuse.\"}]]}]\n4b:[\"$\",\"$L47\",\"6\",{\"value\":\"item-6\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Do I
58need design skills to use the SVG generator AI?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"No. Start with a plain-language prompt for a logo, icon, illustration, wordmark, or other SVG graphic, then refine the result with follow-up edits.\"}]]}]\n4c:[\"$\",\"$L47\",\"7\",{\"value\":\"item-7\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Can I edit AI SVGs after generating them?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. SVG AI works as an AI SVG editor: after generating an SVG, refine it with follow-up prompts to change colors, composition, details, or style. Each refinement keeps the result editable.\"}]]}]\n4d:[\"$\",\"$L47\",\"8\",{\"value\":\"item-8\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hov"])</script>
58<script>self.__next_f.push([1,"er:text-primary transition-colors py-4\",\"children\":\"What file formats can I download?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"You can download designs as SVG files when your account has export access. Check the result at the size and in the application where you intend to use it.\"}]]}]\n4e:[\"$\",\"$L47\",\"9\",{\"value\":\"item-9\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Can I use the generated SVGs commercially?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. Generated SVGs can be used for personal and commercial projects, including websites, product graphics, marketing assets, and brand concepts.\"}]]}]\n4f:[\"$\",\"$L47\",\"10\",{\"value\":\"item-10\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Is there a limit to how many SVGs I can generate?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"SVG AI uses credits for generation and editing. You can use one-time credit packs or monthly plans, and the current credit amounts and prices are shown in the pricing section.\"}]]}]\n50:[\"$\",\"$L47\",\"11\",{\"value\":\"item-11\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Can I try SVG AI for free?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. Sign up to get starter credits and try creating SVGs. Your dashboard shows the download access available to your account. Paid credit purchases and subscriptions include SVG export.\"}]]}]\n51:[\"$\",\"$L47\",\"12\",{\"value\":\"item-12\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\","])</script>
58<script>self.__next_f.push([1,"null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"How accurate is the AI at interpreting my descriptions?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Describe the subject, style, colors, and important constraints. Results can vary, so inspect details such as lettering, exact colors and small-size appearance, then refine the design where needed.\"}]]}]\n52:[\"$\",\"$L47\",\"13\",{\"value\":\"item-13\",\"className\":\"border-slate-200\",\"children\":[[\"$\",\"$L48\",null,{\"className\":\"text-left text-slate-900 font-semibold hover:no-underline hover:text-primary transition-colors py-4\",\"children\":\"Can I use an image with my SVG prompt?\"}],[\"$\",\"$L49\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed pt-1 pb-4\",\"children\":\"Yes. You can add an optional reference image to guide the style or subject of a new SVG. If you want a straight file conversion from an existing image, use the dedicated Image to SVG Converter.\"}]]}]\n"])</script>
58<script>self.__next_f.push([1,"53:[\"$\",\"div\",null,{\"className\":\"mt-8 max-w-3xl mx-auto rounded-2xl border border-slate-200 bg-slate-50 p-6 text-center shadow-sm\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg font-bold text-slate-900\",\"children\":\"Need a straight image-to-SVG conversion?\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"This generator can use images as optional references with prompts. For direct PNG, JPG, WebP, or GIF file conversion, use the dedicated converter.\"}],[\"$\",\"$L45\",null,{\"href\":\"/convert/image-to-svg\",\"className\":\"mt-4 inline-flex items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-800 shadow-sm ring-1 ring-slate-200 transition-colors hover:bg-slate-100\",\"children\":\"Open Image to SVG Converter\"}]]}]\n"])</script>
58<script>self.__next_f.push([1,"54:[\"$\",\"div\",null,{\"className\":\"mt-12 md:mt-16 text-center bg-slate-50 rounded-2xl p-8 max-w-3xl mx-auto border border-slate-200 shadow-sm\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-slate-900 mb-2\",\"children\":\"Still have questions?\"}],[\"$\",\"p\",null,{\"className\":\"text-slate-600 mb-6\",\"children\":\"Our support team is ready to help with questions about creating SVG logos, icons, illustrations, and text graphics with AI.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row justify-center gap-4\",\"children\":[[\"$\",\"$L45\",null,{\"href\":\"/blog\",\"children\":\"Read Guides \u0026 Tutorials\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 border bg-background h-12 px-4 py-2 min-h-[48px] border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-800 transition-colors\",\"ref\":null}],[\"$\",\"$L45\",null,{\"href\":\"/contact\",\"children\":\"Contact Support\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 bg-primary hover:bg-primary/90 h-12 px-4 py-2 min-h-[48px] bg-gradient-to-r from-[#FF7043] to-[#FFA726] text-white hover:opacity-90 transition-opacity\",\"ref\":null}]]}]]}]\n"])</script>
58<script>self.__next_f.push([1,"42:[\"$\",\"section\",null,{\"id\":\"how-it-works\",\"className\":\"py-16 md:py-24 bg-white relative overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent opacity-50\"}],[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-center mb-12 md:mb-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"inline-flex items-center rounded-full px-4 py-1 text-sm font-semibold bg-gradient-to-r from-[#FF7043]/10 to-[#FFA726]/10 text-[#FF7043]\",\"children\":\"How It Works\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight\",\"children\":\"How the AI SVG Generator Works\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed\",\"children\":\"Start with a short text prompt â and optionally a reference image to guide style. SVG AI generates an editable result, you refine it with plain-English edits, and download the final SVG file.\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8\",\"children\":[[\"$\",\"div\",\"01\",{\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pb-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700\",\"children\":\"01\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#FF7043]\",\"children\":\"Prompt ready\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-xl font-bold text-slate-900\",\"children\":\"Describe Your Vision\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"px-4 md:px-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/workflow/describe-prompt.webp\",\"alt\":\"SVG AI prompt input with the short prompt Cloud shield logo and the Generate My SVG button ready\",\"width\":1280,\"height\":720,\"loading\":\"lazy\",\"className\":\"h-full w-full object-cover object-top\"}]}]}],[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed\",\"children\":\"Start with a short plain-language prompt for the SVG you want to create.\"}]}]]}]}],[\"$\",\"div\",\"02\",{\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pb-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700\",\"children\":\"02\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#FF7043]\",\"children\":\"Generated result\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-xl font-bold text-slate-900\",\"children\":\"AI Generation\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"px-4 md:px-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/workflow/ai-generation-result.webp\",\"alt\":\"SVG AI result page showing the initial generated cloud shield logo on the design canvas\",\"width\":1280,\"height\"
58:720,\"loading\":\"lazy\",\"className\":\"h-full w-full object-cover object-top\"}]}]}],[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed\",\"children\":\"SVG AI turns the prompt into an editable SVG result on the canvas.\"}]}]]}]}],\"$L55\",\"$L56\"]}],\"$L57\",\"$L58\",\"$L59\"]}]]}]\n"])</script>
58<script>self.__next_f.push([1,"55:[\"$\",\"div\",\"03\",{\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pb-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700\",\"children\":\"03\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#FF7043]\",\"children\":\"Plain-English edit\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-xl font-bold text-slate-900\",\"children\":\"Customize \u0026 Refine\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"px-4 md:px-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/workflow/customize-refine.webp\",\"alt\":\"SVG AI edit bar refining the cloud shield logo with a short plain-English edit prompt\",\"width\":1280,\"height\":720,\"loading\":\"lazy\",\"className\":\"h-full w-full object-cover object-top\"}]}]}],[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed\",\"children\":\"Ask for a specific change and refine the result without starting over.\"}]}]]}]}]\n"])</script>
58<script>self.__next_f.push([1,"56:[\"$\",\"div\",\"04\",{\"className\":\"group\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-white rounded-xl shadow-sm border border-slate-200 hover:border-primary/20 h-full overflow-hidden hover:shadow-smooth transition-all duration-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pb-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-700/10 text-base font-bold text-blue-700\",\"children\":\"04\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-[#FF7043]\",\"children\":\"Edited SVG ready\"}],[\"$\",\"h3\",null,{\"className\":\"mt-1 text-xl font-bold text-slate-900\",\"children\":\"Download \u0026 Use\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"px-4 md:px-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[16/9] overflow-hidden rounded-lg border border-slate-200 bg-slate-50\",\"children\":[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/workflow/export-download.webp\",\"alt\":\"SVG AI result page with the edited cloud shield logo and the Download SVG button visible\",\"width\":1280,\"height\":720,\"loading\":\"lazy\",\"className\":\"h-full w-full object-cover object-top\"}]}]}],[\"$\",\"div\",null,{\"className\":\"p-5 md:p-6 pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-slate-600 text-sm leading-relaxed\",\"children\":\"Download the edited SVG file for your project.\"}]}]]}]}]\n"])</script>
58<script>self.__next_f.push([1,"57:[\"$\",\"p\",null,{\"className\":\"mt-6 text-center text-sm leading-6 text-slate-600\",\"children\":\"Sign up to get starter credits. Generation and AI edits use credits; SVG export requires paid access.\"}]\n"])</script>
58<script>self.__next_f.push([1,"58:[\"$\",\"div\",null,{\"className\":\"mt-12 border-t border-slate-200 pt-12 md:mt-16 md:pt-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-center\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-3 text-sm font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Prompt to SVG\"}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold tracking-tight text-slate-900 md:text-3xl\",\"children\":\"What the SVG Generator Produces\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-base leading-7 text-slate-600\",\"children\":\"This complete SVG is the original cloud shield result shown in step 2. Preview the vector below, inspect every path, or download the example to try it in your project.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 grid gap-3\",\"children\":[[\"$\",\"div\",\"Editable SVG\",{\"className\":\"rounded-lg border border-slate-200 bg-white p-4 shadow-sm\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-sm font-bold text-slate-950\",\"children\":\"Editable SVG\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Generated designs can be downloaded as SVG files for scalable web and product use.\"}]]}],[\"$\",\"div\",\"Plain-English edits\",{\"className\":\"rounded-lg border border-slate-200 bg-white p-4 shadow-sm\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-sm font-bold text-slate-950\",\"children\":\"Plain-English edits\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Refine color, shape, layout, and details with follow-up prompts instead of starting over.\"}]]}],[\"$\",\"div\",\"SVG Download\",{\"className\":\"rounded-lg border border-slate-200 bg-white p-4 shadow-sm\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-sm font-bold text-slate-950\",\"children\":\"SVG Download\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"Download SVG files for websites, apps, brand assets, and product graphics.\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"mt-6 text-sm leading-6 text-slate-600\",\"children\":[\"Follow a \",[\"$\",\"$L45\",null,{\"href\":\"/blog/ai-assisted-svg-creation\",\"className\":\"font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"complete SVG project\"}],\" to see how assets fit into a page, or \",[\"$\",\"$L45\",null,{\"href\":\"/blog/ai-svg-generator-comparison/best-ai-svg-generators-2025-complete-comparison-guide\",\"className\":\"font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"compare AI SVG workflows\"}],\" before choosing a method.\",\" \",\"Use the \",[\"$\",\"$L45\",null,{\"href\":\"/blog/how-we-test-ai-generated-svg-files\",\"className\":\"font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"five SVG file checks\"}],\" to inspect a real download before placing it in your project.\"]}]]}],[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"figure\",null,{\"className\":\"mb-4 rounded-lg border border-slate-200 bg-slate-50 p-5\",\"children\":[[\"$\",\"img\",null,{\"src\":\"/homepage-proof/2026-05/svg/svg-logo-generator-cloud-security-logo.svg\",\"alt\":\"Original cloud security SVG: a navy shield and orange padlock inside a blue ring with three orange connection points\",\"width\":256,\"height\":256,\"loading\":\"lazy\",\"className\":\"mx-auto h-56 w-56 max-w-full object-contain\"}],[\"$\",\"figcaption\",null,{\"className\":\"mt-4 text-center text-sm leading-6 text-slate-600\",\"children\":[\"Prompt: âCloud shield logoâ. The original result shown in step 2.\",[\"$\",\"a\",null,{\"href\":\"/homepage-proof/2026-05/svg/svg-logo-generator-cloud-security-logo.svg\",\"download\":\"cloud-shield-original.svg\",\"className\":\"mt-3 block font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"Download the complete example SVG\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"overflow-hidden rounded-lg border border-slate-800 bg-slate-950 shadow-sm\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between border-b border-white/10 px-4 py-3\",\"children\":[\"$L5a\",\"$L5b\"]}],\"$L5c\"]}]]}]]}]}]\n"])</script>
58<script>self.__next_f.push([1,"59:[\"$\",\"div\",null,{\"id\":\"ai-edit-example\",\"className\":\"mt-12 border-t border-slate-200 pt-12 md:mt-16 md:pt-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"max-w-3xl\",\"children\":[[\"$\",\"p\",null,{\"className\":\"mb-3 text-sm font-semibold uppercase tracking-wide text-[#B93812]\",\"children\":\"Prompt, refine, compare\"}],[\"$\",\"h3\",null,{\"className\":\"text-2xl font-bold tracking-tight text-slate-900 md:text-3xl\",\"children\":\"A real AI edit, from mint to orange\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-base leading-7 text-slate-600\",\"children\":\"We created this leaf-and-shield concept for the fictional project FlowMint in SVG AI, then asked for one color change. These are the original and AI-refined results from September 5, 2026, with no manual cleanup.\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-6 grid gap-6 lg:grid-cols-2\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-sm font-bold text-slate-950\",\"children\":\"Original prompt\"}],[\"$\",\"blockquote\",null,{\"className\":\"mt-3 border-l-2 border-primary/30 pl-4 text-sm leading-6 text-slate-600\",\"children\":\"Create a flat vector logo concept for a fictional project called FlowMint, symbol only with no lettering. A single rounded shield containing one simple leaf, centered with generous padding. Dark navy outlines and a mint green leaf on a white background. No gradients, no shadows, no mockup, no tiny details.\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-sm font-bold text-slate-950\",\"children\":\"Refinement prompt\"}],[\"$\",\"blockquote\",null,{\"className\":\"mt-3 border-l-2 border-primary/30 pl-4 text-sm leading-6 text-slate-600\",\"children\":\"Change only the mint green fill of the leaf to warm orange. Keep the navy shield, navy leaf veins, composition, shape and size unchanged.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-8 grid gap-6 md:grid-cols-2\",\"children\":[[\"$\",\"div\",\"flowmint-original.svg\",{\"className\":\"min-w-0 overflow-hidden rounded-lg border border-slate-200 bg-white\",\"children\":[[\"$\",\"figure\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-72 items-center justify-center border-b border-slate-100 bg-slate-50 p-6\",\"children\":[\"$\",\"img\",null,{\"src\":\"/campaign-proof/2026-09-05/flowmint-original.svg\",\"alt\":\"FlowMint logo concept with a mint green leaf and navy veins inside a navy shield\",\"width\":256,\"height\":256,\"loading\":\"lazy\",\"className\":\"h-56 w-56 max-w-full object-contain\"}]}],[\"$\",\"figcaption\",null,{\"className\":\"p-5\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-lg font-bold text-slate-950\",\"children\":\"Original generated SVG\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"The first result uses a mint leaf and navy shield, with generous space around the mark.\"}],[\"$\",\"a\",null,{\"href\":\"/campaign-proof/2026-09-05/flowmint-original.svg\",\"download\":true,\"className\":\"mt-3 inline-flex text-sm font-semibold text-[#B93812] underline underline-offset-4\",\"children\":[\"Download \",\"original\",\" SVG\"]}]]}]]}],[\"$\",\"details\",null,{\"className\":\"border-t border-slate-100 p-5\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer text-sm font-semibold text-slate-700\",\"children\":\"View this step in SVG AI\"}],[\"$\",\"a\",null,{\"href\":\"/campaign-proof/2026-09-05/flowmint-original-browser.png\",\"className\":\"mt-4 block\",\"aria-label\":\"Open full screenshot: Original generated SVG\",\"children\":[\"$\",\"img\",null,{\"src\":\"/campaign-proof/2026-09-05/flowmint-original-browser.png\",\"alt\":\"SVG AI editor showing the original mint leaf and shield with one version in its history\",\"width\":1280,\"height\":542,\"loading\":\"lazy\",\"className\":\"h-auto w-full rounded border border-slate-200\"}]}]]}]]}],[\"$\",\"div\",\"flowmint-ai-edited.svg\",{\"className\":\"min-w-0 overflow-hidden rounded-lg border border-slate-200 bg-white\",\"children\":[[\"$\",\"figure\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-72 items-center justify-center border-b border-slate-100 bg-slate-50 p-6\",\"children\":\"$L5d\"}],\"$L5e\"]}],\"$L5f\"]}]]}],\"$L60\"]}]\n"])</script>
58<script>self.__next_f.push([1,"5a:[\"$\",\"span\",null,{\"className\":\"text-xs font-semibold uppercase tracking-wide text-slate-300\",\"children\":\"Complete original SVG\"}]\n5b:[\"$\",\"span\",null,{\"className\":\"rounded-full bg-emerald-400/10 px-2.5 py-1 text-xs font-semibold text-emerald-300\",\"children\":\"SVG code ready\"}]\n61:T1418,"])</script>
58<script>self.__next_f.push([1,"\u003csvg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:block\" viewBox=\"0 0 2048 2048\"\u003e\u003cpath fill=\"#fefefd\" d=\"M0 0h2048v2048H0z\"/\u003e\u003cpath fill=\"#0f1b2e\" d=\"M985.632 509.678c39.108-17.407 40.298-11.796 76.118 3.428 28.29 13.724 56.3 28.097 84.94 41.076 122.37 55.44 250.6 100.398 383.36 122.775 19.34 2.442 34.35 6.515 41.06 27.099 3.44 10.548 3.85 19.462 4.19 30.743 5.35 179.854-10 363.121-68.24 534.311-8.4 24.69-18.92 54.44-30.22 77.72 17.33 12.26 37.02 24.83 54.88 36.46-14.32 29.05-17.59 43.66-19.83 76.39-23.42-12.2-47.32-26.94-70.6-39.91a851.9 851.9 0 0 1-327.76 330.26c-18.26 10.51-79.82 47.08-98.42 41.54-30.095-8.97-66.617-31.78-94.693-47.25-140.664-83.93-236.861-182.46-317.987-323.42-4.703 3.34-17.746 10.14-23.316 13.25a4048 4048 0 0 1-47.048 26.12c-2.603-33.53-5.446-46.56-19.354-77 17.137-10.64 37.18-24.24 53.741-35.76-.11-.19-.22-.38-.331-.58-75.224-172.65-101.935-363.261-101.052-550.549 1.359-30.286-1.863-63.48 5.794-92.8 2.551-7.741 8.607-16.159 15.736-19.878 10.19-5.317 21.695-6.024 32.936-7.982 12.258-2.136 24.266-4.13 36.469-6.8a1572.3 1572.3 0 0 0 318.949-106.135c37.741-16.926 73.421-35.413 110.678-53.108\"/\u003e\u003cpath fill=\"#0466ee\" d=\"M1476.84 1346.83c17.33 12.26 37.02 24.83 54.88 36.46-14.32 29.05-17.59 43.66-19.83 76.39-23.42-12.2-47.32-26.94-70.6-39.91 13.07-25.39 23.76-46.99 35.55-72.94m-910.387.68c12.034 26.71 22.187 47.68 35.977 73.39-4.703 3.34-17.746 10.14-23.316 13.25a4048 4048 0 0 1-47.048 26.12c-2.603-33.53-5.446-46.56-19.354-77 17.137-10.64 37.18-24.24 53.741-35.76\"/\u003e\u003cpath fill=\"#fefefd\" d=\"M1019.24 604.764c3.29.302 65.19 32.701 75.03 37.478a1541 1541 0 0 0 381.96 128.609c4.95 154.143-14.06 327.949-64.38 473.409-69.56 201.04-197.61 343.41-388.82 435.87-5.07.05-27.814-12.41-33.466-15.45a771.9 771.9 0 0 1-193.499-145.09c-185.997-195.17-236.825-487.58-230.598-748.318 39.554-8.455 75.389-16.318 114.726-27.319a1641 1641 0 0 0 339.047-139.189\"/\u003e\u003cpath fill=\"#fe5a25\" d=\"M825.552 1017.33c27.839-1.12 61.894-.2 90.083-.2l169.865.02 87.52-.06c27.5-.01 61.15-5.24 78.3 20.32 11.95 17.81 8.65 42.39 8.63 63.12l-.02 79.45.01 110.84c0 34.96 3.23 67.59-11.48 100.26-11.73 26.06-26.88 42.66-50.21 58.5a127.4 127.4 0 0 1-46.02 16.92c-14.44 2.29-35.59 1.63-50.85 1.61l-73.33-.08-84.115.08c-17.169.01-41.082.82-57.387-1.99a125.25 125.25 0 0 1-52.195-22.17 131.66 131.66 0 0 1-51.917-86.76c-2.522-16.26-1.671-43.82-1.668-61.37l.063-99.48-.056-87.18c-.055-39.04-7.665-84.91 44.777-91.83\"/\u003e\u003cpath fill=\"#0f1b2e\" d=\"M1010.29 1114.24c4.56-.37 9.14-.46 13.72-.26 18.49.85 35.82 9.28 47.91 23.3a68.84 68.84 0 0 1 16.72 50.62c-1.67 22.43-11.65 37.58-28.11 51.89l10.35 70.63c2.29 15.61 13.1 50.75-9.6 54.04-8.88 1.29-20.33.7-29.54.55-15.56-.06-31.5.56-47.028.09-6.072-.19-12.214-1.63-16.01-6.54-2.319-2.82-4.524-8.33-4.134-12.06 3.715-35.51 10.499-71.43 14.938-106.83-13.712-11.49-22.407-23.62-26.568-41.29a67.58 67.58 0 0 1 8.682-52.19c11.73-18.63 27.778-27.3 48.67-31.95m.42-352.808a83 83 0 0 1 7.65-.346c66.42-.195 123.28 33.866 153.95 92.94 23.02 44.336 18.58 90.76 18.53 139.013l-69.72.007c.11-42.14 6.15-88.502-20.52-122.567-18.63-23.8-40.9-35.213-70.36-39.336q-1.86-.083-3.72-.109c-29.701-.625-53.991 7.349-75.924 28.165-38.835 36.857-30.65 84.33-31.308 133.78l-68.945.088c-.556-64.207-5.486-116.779 38.552-169.814 32.527-39.172 71.932-57.149 121.815-61.821\"/\u003e\u003cpath fill=\"#0466ee\" d=\"M1195.33 248.729a816.8 816.8 0 0 1 174.64 56.726c190.18 86.293 339.3 253.206 412.26 448.049a832.16 832.16 0 0 1 29.06 480.986c-4.43 18.51-16.12 64.83-23.42 80.9-2.44.3-3.04-.81-5.74-2.5-21.56-15.91-40.78-22.04-66.07-28.41 7.36-23.27 13.8-46.82 19.31-70.6 45.19-195.14 9.41-400.264-99.18-568.579-105.31-166.545-266.51-273.762-457.46-316.849 12.46-31.156 15.82-46.172 16.6-79.723m-346.506.53c2.209-.376 1.093-.486 3.326.5 1.492 5.604.517 16.613 1.4 24.033 2.459 20.646 7.619 35.311 14.759 54.334a714 714 0 0 0-90.717 24.861c-183.24 63.86-333.432 198.184-417.272 373.186-84.518 174.56-96.488 375.477-33.293 558.837-24.721 5.05-41.959 12.33-62.882 25.87l-9.653 6.46a862 862 0 0 1-27.385-95.45c-46.397-213.49-7.006-436.659 109.675-621.362a789.06 789.06 0 0 1 402.183-320.82c37.261-13.219 71.569-21.987 109.859-30.449M504.629 1566.94c135.88 145.46 325.052 244.14 527.151 240.47 156.82-2.85 305.07-63.42 425.63-162.4 29.99-24.62 55.76-49.77 82.68-77.71 19.61 26.57 33.28 37.34
5861.28 53.69a1780 1780 0 0 1-46.75 46.84c-143.98 138.04-352.73 230.71-553.52 224.99-213.028-6.08-414.367-120.4-558.303-272.28 25.835-12.1 45.123-30.92 61.832-53.6\"/\u003e\u003cpath fill=\"#fe5a25\" d=\"M356.773 1319c78.828-.83 143.384 62.44 144.134 141.27.751 78.83-62.59 143.32-141.42 143.98-78.71.67-143.079-62.56-143.828-141.27-.749-78.7 62.405-143.14 141.114-143.98m1327.477.14c78.45-.77 142.79 61.99 143.95 140.44s-61.29 143.1-139.73 144.65c-78.99 1.56-144.19-61.42-145.36-140.42s62.13-143.89 141.14-144.67M1010.68 113.382c75.76-7.337 143.14 48.114 150.52 123.876 7.37 75.763-48.05 143.168-123.8 150.583-75.817 7.42-143.282-48.046-150.663-123.863s48.119-143.254 123.943-150.596\"/\u003e\u003cpath fill=\"#0466ee\" d=\"M985.546 418.285c31.544 4.932 44.494 5.087 76.424.188 0 30.882.55 63.957-.22 94.633-35.82-15.224-37.01-20.835-76.118-3.428-.648-28.709-1.015-62.786-.086-91.393\"/\u003e\u003c/svg\u003e"])</script>
58<script>self.__next_f.push([1,"5c:[\"$\",\"pre\",null,{\"tabIndex\":0,\"role\":\"region\",\"aria-label\":\"Complete source code for the original cloud shield SVG\",\"className\":\"max-h-72 overflow-auto whitespace-pre-wrap break-all px-4 py-4 text-xs leading-6 text-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\",\"children\":[\"$\",\"code\",null,{\"children\":\"$61\"}]}]\n5d:[\"$\",\"img\",null,{\"src\":\"/campaign-proof/2026-09-05/flowmint-ai-edited.svg\",\"alt\":\"AI-refined FlowMint logo with an orange leaf, navy veins and shield, and tighter framing\",\"width\":256,\"height\":256,\"loading\":\"lazy\",\"className\":\"h-56 w-56 max-w-full object-contain\"}]\n5e:[\"$\",\"figcaption\",null,{\"className\":\"p-5\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"text-lg font-bold text-slate-950\",\"children\":\"After AI refinement\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-sm leading-6 text-slate-600\",\"children\":\"The leaf is now orange. The AI also adjusts the paths, navy tone and framing, so both versions are worth reviewing.\"}],[\"$\",\"a\",null,{\"href\":\"/campaign-proof/2026-09-05/flowmint-ai-edited.svg\",\"download\":true,\"className\":\"mt-3 inline-flex text-sm font-semibold text-[#B93812] underline underline-offset-4\",\"children\":[\"Download \",\"AI-refined\",\" SVG\"]}]]}]\n5f:[\"$\",\"details\",null,{\"className\":\"border-t border-slate-100 p-5\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"cursor-pointer text-sm font-semibold text-slate-700\",\"children\":\"View this step in SVG AI\"}],[\"$\",\"a\",null,{\"href\":\"/campaign-proof/2026-09-05/flowmint-ai-edited-browser.png\",\"className\":\"mt-4 block\",\"aria-label\":\"Open full screenshot: After AI refinement\",\"children\":[\"$\",\"img\",null,{\"src\":\"/campaign-proof/2026-09-05/flowmint-ai-edited-browser.png\",\"alt\":\"SVG AI editor showing the orange leaf result and both original and edited versions in its history\",\"width\":1280,\"height\":542,\"loading\":\"lazy\",\"className\":\"h-auto w-full rounded border border-slate-200\"}]}]]}]\n60:[\"$\",\"p\",null,{\"className\":\"mt-6 text-sm leading-6 text-slate-600\",\"children\":[[\"$\",\"a\",null,{\"href\":\"/blog/svg-image-e"])</script>
58<script>self.__next_f.push([1,"diting-guide\",\"className\":\"font-semibold text-[#B93812] underline underline-offset-4\",\"children\":\"See the original, AI edit and manual finish\"}],\". The manual version restores the original navy and square framing while keeping the AI-edited orange and curves.\"]}]\n"])</script>
58</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.