Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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)"
}
}
}
```