Svg Preview for VSCode
Features
- Live editing of svg files and svg's inside files
- Panning and zooming of the preview (up to 32767%)
Commands
| Command | Keybinding |
|---|---|
| Svg Preview: Open Preview to the Side | ctrl+alt+p |
| Svg Preview: Reload Preview | none |
Settings
| Property | Description | Default |
|---|---|---|
| svgPreview.autoOpen | Automatically open the preview when a svg file is opened | false |
| svgPreview.scaleToFit | Whether or not the svg should be scaled to fit the viewport or keep its original size | true |
| svgPreview.style | Custom style for the preview | {} |
How to use the svgPreview.style setting
You can change the background color:
{
"svgPreview.style": {
"html": {
"background": "white"
}
}
}Or you can make a checkerboard background:
{
"svgPreview.style": {
"html": {
"background-position": "0 0, 13px 13px",
"background-size": "26px 26px",
"background-image": "linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414), linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414)"
}
}
}