svg-fairy
A vscode extension wrapper for SVGO and Url encoder for SVG
Features
- Optimize SVG files in place (overwrite) or as a copy
- Encode and export SVG files for use in CSS
- All features work on individual files or directories
Optimization with SVGO
Unmodified SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<title>Circle Example</title>
<desc>
This is an example SVG with metadata.
</desc>
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<text x="30" y="55" stroke="blue" rotate="-10">Circle</text>
</svg>
Optimized SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#ff0" stroke="green" stroke-width="4"/><text x="30" y="55" stroke="#00f" rotate="-10">Circle</text></svg>
Exported optimized SVG for CSS:
.circle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23ff0' stroke='green' stroke-width='4'/%3E%3Ctext x='30' y='55' stroke='%2300f' rotate='-10'%3ECircle%3C/text%3E%3C/svg%3E");
}
Extension Settings
This extension contributes the following settings:
svg-fairy.optimizeDirectory: The name of the directory used with the "SVG optimize and copy". Defaults to optimized.svg-fairy.exportFormat: The format for the exported SVG CSS. Defaults to css-class.svg-fairy.externalQuotesValue: The external quote value which surrounds the encoded SVG in CSS. Defaults to double.svg-fairy.svgEncoding: The encoding used for reading SVG file contents. Defaults to utf8.
svg-fairy.exportSVGCSS: Export a single SVG or directory or SVGs to a CSS file.svg-fairy.optimizeAndCopy: Optimize and copy SVG to the optimize directory set in the svg-fairy.optimizeDirectory setting.svg-fairy.optimizeInPlace: Optimize and overwrite SVG.
Known Issues
- Invalid SVG files can be exported to CSS
References
| |
