SVG Rendering Plugin Demo

This demo shows three ways to use SVGs in your blog posts:

1. Inline SVG - Write SVG code directly in markdown
2. Imported SVG - Import from external files and reuse across posts
3. Styled imports - Apply CSS classes and dimensions to imported SVGs

🎯 NEW: Importing SVG Constants

You can now import SVG constants from external files to save space and reuse graphics!

Import Syntax

At the top of your MDX file, import SvgWrapper component

1
import { SvgWrapper } from "@/react/Svg/SvgWrapper.jsx";
2
// or use backward compatible import
3
import Tabs, { TabItem } from "../../react/Svg/SvgWrapper.jsx";

Then import the SVG data as below:

1
import { HOUSE } from "@/data/svg/house.ts";
2
import { CHECK_ICON } from "@/data/svg/icons.ts";

Then use in your content:

1
<SvgWrapper svg={HOUSE} />
2
<SvgWrapper svg={CHECK_ICON} className="pulse-animation" width="100px" />
3
<SvgWrapper svg={HEART_ICON} caption="Optional caption text" />

NEW: Optional Caption

Both SvgWrapper and Base64Image components now support an optional caption prop:

1
<SvgWrapper svg={HOUSE} caption="A simple house icon" />
2
<Base64Image src={MY_IMAGE} caption="Beautiful landscape" />

The caption appears below the image/SVG with muted, italicized text.

Example 1: Imported House

Example 2: Imported Check Icon with Caption

Example 3: Imported Heart with Animation

Example 4: Imported Warning Icon

Example 5: Imported Info Icon with Styling and Caption

Example 6: Imported Star with Hover Effect

Example 7: Imported Circle with Pulse and Caption

Example 8: Imported Gradient Rectangle

Example 9: Imported Smiley with Bounce

🖼️ NEW: Base64 Image Component!

You can import and display base64 encoded images with optional lazy loading!

Base64 Image Import Syntax

At the top of your MDX file, import Base64Image component

1
import { Base64Image } from "@/react/Image/Base64Image.jsx";
2
// or use backward compatible import
3
import Tabs, { TabItem } from "../../react/Image/Base64Image.jsx";

Then import the Image data as below:

1
import { DEMO_IMAGE, SAMPLE_LANDSCAPE } from "@/data/images/base64-images.ts";

Usage Options

Without lazy loading (instant display):

1
<Base64Image src={DEMO_IMAGE} alt="Demo" width="300px" />

With lazy loading (shows spinner, requires client:load):

1
<Base64Image src={SAMPLE_LANDSCAPE} alt="Landscape" width="400px" lazy={true} client:load />

With caption:

1
<Base64Image src={DEMO_IMAGE} alt="Demo" width="300px" caption="A beautiful demonstration image" />

⚠️ IMPORTANT: When using lazy={true}, you MUST add client:load directive for React hydration!

Props

• src - Base64 image string (required)
• alt - Alt text
• className - CSS classes (with-shadow, bordered, etc.)
• width / height - Custom dimensions
• lazy - Enable lazy loading (default: false)
• loadingDelay - Delay in ms (default: 1500, only with lazy)
• caption - Optional caption text shown below image

Note: Images are center-aligned by default. Use className="left" or className="right" to change alignment.

Example 11: Basic Base64 Image with Caption

Demo image showing instant display (no lazy loading)

Example 12: Base64 Image with Shadow and Caption

Beautiful landscape with shadow effect

Example 13: With Lazy Loading + Spinner + Caption (Requires client:load)

Portrait with lazy loading and border

Example 14: Left Aligned Image

Example 15: Multiple Base64 Images (No Lazy)

Example 16: Lazy Loading with Custom Delay and Caption (2 seconds)

Landscape with 2-second loading delay for demonstration

Example 17: Inline SVG (Traditional Method)

Here’s a basic SVG circle using code block syntax:

1
svg {class="bordered"}
2
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
3
  <circle cx="60" cy="60" r="50" fill="#ff6b6b" stroke="#c92a2a" stroke-width="3"/>
4
</svg>

Example 2: Star with Custom Class

Here’s a star with custom width:

1
svg {width="150px"}
2
<svg viewBox="0 0 51 48" xmlns="http://www.w3.org/2000/svg">
3
  <path d="M25.5 0L31.5 18.5H51L35.5 30L41.5 48.5L25.5 37L9.5 48.5L15.5 30L0 18.5H19.5L25.5 0Z" fill="gold" stroke="#ff8800" stroke-width="1.5"/>
4
</svg>

Example 3: Gradient Rectangle

Beautiful gradient effect:

1
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
2
  <defs>
3
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
4
      <stop offset="0%" style="stop-color:rgb(255,95,109);stop-opacity:1" />
5
      <stop offset="50%" style="stop-color:rgb(255,195,113);stop-opacity:1" />
6
      <stop offset="100%" style="stop-color:rgb(168,85,247);stop-opacity:1" />
7
    </linearGradient>
8
  </defs>
9
  <rect width="300" height="150" rx="10" fill="url(#grad1)" />
10
  <text x="150" y="80" font-family="Arial" font-size="24" fill="white" text-anchor="middle">Gradient!</text>
11
</svg>

Example 4: Responsive Icon

Using viewBox for responsiveness:

Example 5: Multiple Shapes

Complex composition:

Example 6: With Shadow

Example 7: With Border

svg {class="bordered"}

Example 8: With Background

svg {class="with-bg"}

Example 9: Centered with Shadow

svg {class="with-shadow centered"}

Example 10: Left Aligned

svg {class="left bordered"}

Example 11: Right Aligned with Background

svg {class="right with-bg"}

Example 12: Pulse Animation

svg {class="pulse-animation centered"}

Example 13: Bounce Animation

svg {class="bounce-animation"}

Example 14: Rotate Animation

svg {class="rotate-animation"}

Example 15: Wiggle Animation

svg {class="wiggle-animation bordered"}

Example 16: Fade Animation

svg {class="fade-animation"}

Example 17: Heartbeat Animation

svg {class="heartbeat-animation"}

Example 18: Shake Animation

svg {class="shake-animation with-bg"}

Example 19: Float Animation

svg {class="float-animation centered"}

Example 20: Glow Animation

svg {class="glow-animation"}

Example 21: Swing Animation

svg {class="swing-animation"}

Example 22: Zoom Animation

svg {class="zoom-animation bordered"}

Example 23: Spin Slow Animation

svg {class="spin-slow-animation"}

Example 24: Hover Grow

svg {class="hover-grow with-shadow"}

Example 25: Hover Rotate

svg {class="hover-rotate bordered"}

Example 26: Hover Shadow

svg {class="hover-shadow"}

Example 27: Small Size

svg {class="svg-small"}

Example 28: Medium Size

svg {class="svg-medium bordered"}

Example 29: Large Size

svg {class="svg-large centered"}

Example 30: Full Width Size

svg {class="svg-full with-shadow"}

Example 31: Combined Classes - Shadow + Centered + Pulse

svg {class="with-shadow centered pulse-animation"}

Example 32: Combined Classes - Border + Background + Bounce

svg {class="bordered with-bg bounce-animation"}

Example 33: With Custom Width and Height

svg {width="250px" height="120px"}

Example 34: All Combined - Width, Class, Multiple Animations

svg {class="bordered with-shadow glow-animation centered" width="180px"}

Using Directive Syntax

You can also use the directive syntax:

1
:::svg{class="with-shadow centered"}
2
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
3
  <rect x="10" y="10" width="100" height="100" fill="#a855f7" rx="15"/>
4
  <circle cx="60" cy="60" r="30" fill="white" opacity="0.3"/>
5
</svg>
6
:::

Example 35: Directive with Animation

:::svg{class="rotate-animation bordered"}

Example 36: Directive with Width

:::svg{width="200px" class="centered"}

Heart Icon

Old Heart Icon (For Reference)

Using Directive Syntax

You can also use the directive syntax:

CSS Custom Classes - Available Options

The plugin provides extensive CSS styling options you can combine:

Basic Utilities

• with-shadow - Adds subtle drop shadow
• bordered - Adds 2px solid border
• with-bg - Adds light background (adapts to dark mode)
• centered - Center alignment
• left - Left alignment
• right - Right alignment

Size Utilities

• svg-small - Max width 150px
• svg-medium - Max width 300px
• svg-large - Max width 500px
• svg-full - Full width (100%)

Animations

• pulse-animation - Gentle pulsing effect
• bounce-animation - Bouncing motion
• rotate-animation - 360° rotation
• wiggle-animation - Side-to-side wiggle
• fade-animation - Fade in/out
• heartbeat-animation - Heartbeat scaling
• shake-animation - Horizontal shake
• float-animation - Vertical floating
• glow-animation - Pulsing glow effect
• swing-animation - Pendulum swing
• zoom-animation - Zoom in/out
• spin-slow-animation - Slow continuous spin

Hover Effects

• hover-grow - Grows on hover
• hover-rotate - Rotates on hover
• hover-shadow - Shadow appears on hover

Usage Examples

Single class:

1
```svg {class="with-shadow"}
2
<svg>...</svg>
3
```

Multiple classes combined:

1
```svg {class="bordered with-bg centered pulse-animation"}
2
<svg>...</svg>
3
```

With custom dimensions:

1
```svg {class="with-shadow" width="200px" height="150px"}
2
<svg>...</svg>
3
```

Directive syntax:

1
:::svg{class="hover-grow with-shadow"}
2
<svg>...</svg>
3
:::

🛡️ Security Features

The plugin automatically protects against XSS attacks by:

• Removing all <script> tags
• Removing event handlers (onclick, onload, onmouseover, etc.)
• Removing javascript: protocol from URLs
• Validating SVG structure

You can safely use SVG from untrusted sources!

Tips & Best Practices

✅ DO:

• Always include xmlns="http://www.w3.org/2000/svg"
• Use viewBox for responsiveness instead of fixed dimensions
• Combine classes for richer effects: {class="bordered with-shadow pulse-animation"}
• Test animations in both light and dark modes
• Use semantic IDs for gradients to avoid conflicts

❌ DON’T:

• Include JavaScript (automatically removed for security)
• Use event handlers (automatically removed)
• Forget to close SVG tags properly
• Use duplicate gradient IDs across multiple SVGs on same page
• Overuse animations - they can be distracting

Conclusion

The SVG rendering plugin works great! You can now easily embed SVG graphics directly in your markdown blog posts using either:

• Code blocks: ```svg … “’
• Directives: :::svg ... :::

Code Block (Recommended)

1
```svg
2
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
3
  <!-- SVG content here -->
4
</svg>
5
```

Directive

1
:::svg
2
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
3
  <!-- SVG content here -->
4
</svg>
5
:::

Code Block with Attributes

1
```svg {class="custom-class" width="200px" height="150px"}
2
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
3
  <!-- SVG content -->
4
</svg>
5
```

Directive with Attributes

1
:::svg{class="custom-class" width="200px"}
2
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
3
  <!-- SVG content -->
4
</svg>
5
:::

Both support custom styling through class names and inline styles. The plugin also includes built-in security features to prevent XSS attacks.

Common SVG Shapes

Circle

1
<circle cx="50" cy="50" r="40" fill="blue" />

Rectangle

1
<rect x="10" y="10" width="80" height="60" fill="green" />

Rounded Rectangle

1
<rect x="10" y="10" width="80" height="60" rx="10" fill="orange" />

Ellipse

1
<ellipse cx="50" cy="50" rx="40" ry="25" fill="purple" />

Line

1
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />

Polyline

1
<polyline points="10,10 50,50 90,10" stroke="red" fill="none" stroke-width="2" />

Polygon (Triangle)

1
<polygon points="50,10 90,90 10,90" fill="yellow" />

Path (Complex Shapes)

1
<path d="M 10 10 L 90 90 L 10 90 Z" fill="cyan" />

Text

1
<text x="50" y="50" font-family="Arial" font-size="20" fill="black" text-anchor="middle">Hello!</text>

Common Attributes

Gradients

Linear Gradient

1
<defs>
2
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
3
    <stop offset="0%" style="stop-color:rgb(255,255,0)" />
4
    <stop offset="100%" style="stop-color:rgb(255,0,0)" />
5
  </linearGradient>
6
</defs>
7
<rect width="200" height="100" fill="url(#grad1)" />

Radial Gradient

1
<defs>
2
  <radialGradient id="grad2">
3
    <stop offset="0%" style="stop-color:rgb(255,255,255)" />
4
    <stop offset="100%" style="stop-color:rgb(0,0,255)" />
5
  </radialGradient>
6
</defs>
7
<circle cx="50" cy="50" r="40" fill="url(#grad2)" />

Animations

Attribute Animation

1
<circle cx="50" cy="50" r="40" fill="red">
2
  <animate attributeName="r" values="40;50;40" dur="2s" repeatCount="indefinite" />
3
</circle>

Transform Animation

1
<rect x="25" y="25" width="50" height="50" fill="blue">
2
  <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite" />
3
</rect>

Icons (Ready to Use)

Checkmark

1
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2
  <circle cx="50" cy="50" r="45" fill="#10b981"/>
3
  <path d="M 30 50 L 45 65 L 70 35" stroke="white" stroke-width="8" fill="none" stroke-linecap="round"/>
4
</svg>

Warning

1
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2
  <polygon points="50,10 90,85 10,85" fill="#f59e0b"/>
3
  <text x="50" y="65" font-size="50" font-weight="bold" fill="white" text-anchor="middle">!</text>
4
</svg>

Info

1
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2
  <circle cx="50" cy="50" r="45" fill="#3b82f6"/>
3
  <circle cx="50" cy="30" r="5" fill="white"/>
4
  <rect x="45" y="42" width="10" height="35" rx="5" fill="white"/>
5
</svg>

Heart

1
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2
  <path d="M50,85 C25,70 5,50 5,30 C5,15 15,5 27.5,5 C35,5 42,10 50,20 C58,10 65,5 72.5,5 C85,15 95,15 95,30 C95,50 75,70 50,85 Z" fill="#e74c3c"/>
3
</svg>

Star

1
<svg viewBox="0 0 51 48" xmlns="http://www.w3.org/2000/svg">
2
  <path d="M25.5 0L31.5 18.5H51L35.5 30L41.5 48.5L25.5 37L9.5 48.5L15.5 30L0 18.5H19.5L25.5 0Z" fill="gold"/>
3
</svg>

CSS Custom Classes

Available wrapper classes:

• .remark-svg-wrapper (default)
• .with-shadow - adds drop shadow
• .centered - center aligned
• .left - left aligned
• .right - right aligned
• .bordered - adds border
• .with-bg - adds background

Usage:

1
```svg {class="with-shadow centered"}
2
<svg>...</svg>
3
```

Color Reference

Common colors:

• Red: #e74c3c, #ff0000
• Blue: #3b82f6, #0000ff
• Green: #10b981, #00ff00
• Yellow: #f59e0b, #ffff00
• Purple: #a855f7, #800080
• Orange: #f97316, #ffa500
• Pink: #ec4899, #ffc0cb
• Gray: #6b7280, #808080

Tips & Tricks

✅ DO:

• Always include xmlns="http://www.w3.org/2000/svg"
• Use viewBox for responsiveness
• Use semantic class names
• Optimize SVG before embedding
• Test in different themes

❌ DON’T:

• Include JavaScript (will be removed)
• Use event handlers (removed for security)
• Embed external images
• Forget to close SVG tag
• Use absolute pixel sizes when relative units work better

🛡️ Security

The plugin automatically:

• Removes <script> tags
• Removes event handlers (onclick, onload, etc.)
• Removes javascript: protocol
• Validates SVG structure

Additional Resources

• MDN SVG Tutorial
• SVG Optimization Tools
• SVG Path Generator

Happy SVG rendering! 🎨