Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SimonSiefke/vscode-svg-preview
Svg Preview for VSCode
https://github.com/SimonSiefke/vscode-svg-preview
preview svg svg-preview
Last synced: about 1 month ago
JSON representation
Svg Preview for VSCode
- Host: GitHub
- URL: https://github.com/SimonSiefke/vscode-svg-preview
- Owner: SimonSiefke
- License: mit
- Archived: true
- Created: 2019-04-05T13:54:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-02T07:34:42.000Z (about 3 years ago)
- Last Synced: 2024-08-03T09:13:12.612Z (4 months ago)
- Topics: preview, svg, svg-preview
- Language: TypeScript
- Homepage:
- Size: 24.2 MB
- Stars: 45
- Watchers: 2
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - vscode-svg-preview
README
[![travis build](https://img.shields.io/travis/com/SimonSiefke/vscode-svg-preview.svg)](https://travis-ci.com/SimonSiefke/vscode-svg-preview) [![Version](https://vsmarketplacebadge.apphb.com/version/SimonSiefke.svg-preview.svg)](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)
# Svg Preview for VSCode
![demo](./demo_images/demo.gif)
## 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:
![demo of the svg preview with white background](./demo_images/demo_white_background.png)
```json
{
"svgPreview.style": {
"html": {
"background": "white"
}
}
}
```Or you can make a checkerboard background:
![demo of the svg preview with a checkerboard pattern background](./demo_images/demo_checkerboard_background.png)
```json
{
"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)"
}
}
}
```