vite-plugin-svg-in-og-image
v0.1.0
Published
A Vite plugin that automatically converts SVG files used in og:image meta tags to PNG format
Downloads
15
Maintainers
yosef-abrahamReadme
vite-plugin-svg-in-og-image
A Vite plugin that automatically converts SVG files used in og:image meta tags to PNG format. This is essential for social media platforms that don't support SVG images in Open Graph meta tags.
Why?
Most social media platforms (Facebook, Twitter, LinkedIn, etc.) don't support SVG images in og:image meta tags. They require raster formats like PNG or JPEG. This plugin automatically detects SVG files referenced in your HTML meta tags and converts them to PNG behind the scenes.
Features
- 🚀 Automatic Detection: Scans your HTML for SVG files in meta tags
- 🔄 Seamless Conversion: Converts SVG to PNG using Sharp for high quality
- 📁 Organized Output: Creates a dedicated directory for converted images
- ⚡ Build Integration: Works seamlessly with Vite's build process
- 🎛️ Configurable: Multiple options for customization
- 📝 TypeScript Support: Full TypeScript support with type definitions
Installation
npm install vite-plugin-svg-in-og-image
# or
yarn add vite-plugin-svg-in-og-image
# or
pnpm add vite-plugin-svg-in-og-imageUsage
Basic Setup
// vite.config.ts
import { defineConfig } from 'vite'
import svgInOgImage from 'vite-plugin-svg-in-og-image'
export default defineConfig({
plugins: [
svgInOgImage()
]
})HTML Usage
<!DOCTYPE html>
<html>
<head>
<!-- This SVG will be automatically converted to PNG -->
<meta property="og:image" content="/images/social-card.svg" />
<meta name="twitter:image" content="/images/twitter-card.svg" />
</head>
<body>
<!-- Your content -->
</body>
</html>After the build, the plugin will:
- Convert
/images/social-card.svgto/images/og-images/social-card.png - Update the HTML to reference the PNG files instead
- The final HTML will contain:
<meta property="og:image" content="/images/og-images/social-card.png" />
Configuration
// vite.config.ts
import { defineConfig } from 'vite'
import svgInOgImage from 'vite-plugin-svg-in-og-image'
export default defineConfig({
plugins: [
svgInOgImage({
// Directory where SVG files are located (relative to project root)
inputDir: 'public', // default: 'public'
// Directory where converted PNG files will be saved (relative to inputDir)
outputDir: 'og-images', // default: 'og-images'
// PNG compression quality (0-100)
quality: 90, // default: 90
// Whether to log conversion progress
verbose: true, // default: true
// Custom regex pattern to match SVG files in HTML
svgPattern: /content="([^"]*\.svg)"/g // default pattern
})
]
})Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| inputDir | string | 'public' | Directory where SVG files are located (relative to project root) |
| outputDir | string | 'og-images' | Directory where converted PNG files will be saved (relative to inputDir) |
| quality | number | 90 | PNG compression quality (0-100) |
| verbose | boolean | true | Whether to log conversion progress |
| svgPattern | RegExp | /content="([^"]*\.svg)"/g | Custom regex pattern to match SVG files in HTML |
How It Works
- Detection Phase: The plugin scans your HTML files during the build process
- Pattern Matching: It looks for SVG files referenced in
contentattributes (typically in meta tags) - Conversion: Found SVG files are converted to PNG format using Sharp
- Path Replacement: The HTML is updated to reference the new PNG files
- File Organization: Converted files are saved in the specified output directory
File Structure
your-project/
├── public/
│ ├── images/
│ │ ├── social-card.svg # Original SVG
│ │ └── og-images/ # Created by plugin
│ │ └── social-card.png # Converted PNG
│ └── index.html
└── vite.config.tsSupported Patterns
The plugin automatically detects SVG files in these common meta tag patterns:
<meta property="og:image" content="/path/to/image.svg" /><meta name="twitter:image" content="/path/to/image.svg" /><meta name="twitter:image:src" content="/path/to/image.svg" />- Any other meta tag with
content="path/to/file.svg"
Requirements
- Node.js >= 18
- Vite >= 4.0.0
Dependencies
- Sharp: Used for high-quality SVG to PNG conversion
- Vite: Peer dependency for plugin integration
License
MIT
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Issues
If you encounter any issues, please file them at: GitHub Issues