Ensuring SVG Graphics Render Properly in Lovable Projects

Why SVG graphics fail to render in Lovable projects

Lovable uses React with JSX, which means SVGs need to follow JSX rules rather than plain HTML rules. The most common rendering failure happens when you paste raw SVG code from a design tool like Figma or an icon website — the SVG uses HTML attributes (class, fill-rule, clip-path) that JSX does not accept. React requires camelCase equivalents: className, fillRule, clipPath. Another frequent issue is missing or incorrect viewBox values. The viewBox attribute defines the coordinate system of the SVG. Without it, the SVG may render at zero size or overflow its container. Design tools sometimes export SVGs without a viewBox, relying on explicit width and height instead, which breaks when you try to make the SVG responsive with Tailwind utility classes. Color problems are also common. SVGs exported from design tools often have hardcoded fill colors like fill="#000000" or fill="white". When your Lovable app uses a dark theme, a white-filled SVG disappears against a white background (or a black-filled SVG disappears on dark backgrounds). Using fill="currentColor" makes the SVG inherit the text color from its parent, adapting automatically to any theme.

• HTML attributes instead of JSX attributes: class instead of className, fill-rule instead of fillRule
• Missing viewBox attribute: SVG renders at zero dimensions or wrong aspect ratio
• Hardcoded fill colors that match the background, making the SVG invisible
• SVG file referenced via img src but the file path is wrong or not in /public
• SVGR transform not applied: importing an .svg file as a component without proper Vite configuration

Error messages you might see

Before you start

• A Lovable project open in the editor
• Your SVG code or SVG file ready (exported from Figma, Illustrator, or downloaded from an icon library)
• Basic understanding of where to paste code in Lovable (use @filename references or Dev Mode)

How to fix it

<svg class="icon" viewBox="0 0 24 24" fill="none">
  <path
    d="M12 2L2 7l10 5 10-5-10-5z"
    fill-rule="evenodd"
    clip-rule="evenodd"
    stroke-width="2"
    stroke-linecap="round"
  />
</svg>

<svg className="icon" viewBox="0 0 24 24" fill="none">
  <path
    d="M12 2L2 7l10 5 10-5-10-5z"
    fillRule="evenodd"
    clipRule="evenodd"
    strokeWidth="2"
    strokeLinecap="round"
  />
</svg>

<!-- SVG without viewBox — won't scale properly -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

<!-- SVG with viewBox — scales to any size via Tailwind -->
<svg viewBox="0 0 200 200" className="w-12 h-12" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

<svg viewBox="0 0 24 24" className="w-6 h-6">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="#000000" />
  {/* Invisible on dark backgrounds */}
</svg>

<svg viewBox="0 0 24 24" className="w-6 h-6">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor" />
  {/* Inherits color from parent — works on any background */}
</svg>

<!-- Broken: wrong path, SVG not in /public -->
<img src="logo.svg" alt="Logo" />
{/* 404: file not found */}

<!-- Working: SVG file is in /public/images/logo.svg -->
<img src="/images/logo.svg" alt="Logo" className="w-32 h-auto" />
{/* Root-relative path — Vite serves /public at / */}

Complete code example

1import { cn } from "@/lib/utils";
2
3interface SvgIconProps {
4  className?: string;
5}
6
7// Reusable inline SVG component with proper JSX attributes
8// Uses currentColor so it inherits the parent's text color
9const SvgIcon = ({ className }: SvgIconProps) => {
10  return (
11    <svg
12      viewBox="0 0 24 24"
13      fill="none"
14      xmlns="http://www.w3.org/2000/svg"
15      className={cn("w-6 h-6", className)}
16    >
17      {/* Star icon — fillRule and strokeLinejoin in camelCase */}
18      <path
19        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
20        fill="currentColor"
21        fillRule="evenodd"
22        clipRule="evenodd"
23      />
24    </svg>
25  );
26};
27
28// Example usage in a page component
29const IconDemo = () => {
30  return (
31    <div className="flex items-center gap-4 p-6">
32      {/* Default size and color from parent */}
33      <span className="text-primary">
34        <SvgIcon />
35      </span>
36
37      {/* Custom size via className override */}
38      <span className="text-yellow-500">
39        <SvgIcon className="w-10 h-10" />
40      </span>
41
42      {/* SVG from /public as img (no inline styling control) */}
43      <img
44        src="/images/logo.svg"
45        alt="Company logo"
46        className="w-8 h-8"
47      />
48    </div>
49  );
50};
51
52export { SvgIcon };
53export default IconDemo;

Best practices to prevent this

• Always include a viewBox attribute on SVG elements — it enables responsive scaling with Tailwind width/height classes
• Use fill="currentColor" and stroke="currentColor" so SVGs adapt to light and dark themes automatically
• Convert all hyphenated SVG attributes to camelCase for JSX: fill-rule → fillRule, stroke-width → strokeWidth, clip-path → clipPath
• For simple icons, use inline SVG components for full Tailwind styling control; for complex illustrations, use img tags with SVG files in /public
• Remove unnecessary metadata and comments from exported SVGs to reduce file size — tools like SVGOMG can optimize SVGs before you paste them
• Use the cn() utility from shadcn/ui to merge default and custom classNames on SVG wrapper components
• Test SVGs in both light and dark mode to catch invisible-on-background color issues early

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns