{"id":13672894,"url":"https://github.com/SimonSiefke/vscode-svg-preview","last_synced_at":"2025-04-28T04:30:32.709Z","repository":{"id":46641009,"uuid":"179691076","full_name":"SimonSiefke/vscode-svg-preview","owner":"SimonSiefke","description":"Svg Preview for VSCode","archived":true,"fork":false,"pushed_at":"2024-12-13T16:26:57.000Z","size":25421,"stargazers_count":45,"open_issues_count":9,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T21:07:42.161Z","etag":null,"topics":["preview","svg","svg-preview"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimonSiefke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-05T13:54:02.000Z","updated_at":"2025-02-14T08:57:48.000Z","dependencies_parsed_at":"2022-09-02T12:01:21.421Z","dependency_job_id":null,"html_url":"https://github.com/SimonSiefke/vscode-svg-preview","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-svg-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-svg-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-svg-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonSiefke%2Fvscode-svg-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonSiefke","download_url":"https://codeload.github.com/SimonSiefke/vscode-svg-preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251251778,"owners_count":21559660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["preview","svg","svg-preview"],"created_at":"2024-08-02T09:01:55.397Z","updated_at":"2025-04-28T04:30:31.862Z","avatar_url":"https://github.com/SimonSiefke.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"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/)\n\n# Svg Preview for VSCode\n\n![demo](./demo_images/demo.gif)\n\n\u003c!-- TODO better demo gif --\u003e\n\u003c!-- TODO need to figure out why animation is restarted so often / prevent unnecessary updates --\u003e\n\u003c!-- TODO update content when just opened / handle active text editor before extension is activated--\u003e\n\u003c!-- TODO vscode live share --\u003e\n\u003c!-- TODO don't zoom/pan outside of the window --\u003e\n\u003c!-- TODO improve external css --\u003e\n\u003c!-- TODO add tests --\u003e\n\u003c!-- TODO bug with commented out \u003c/svg\u003e inside html/js etc --\u003e\n\u003c!-- TODO sometimes buggy when new version is installed --\u003e\n\u003c!-- TODO bug: when deleted file and open another file, preview is not updated --\u003e\n\u003c!-- TODO feature idea: zoom with ctrl+arrow key up/down --\u003e\n\u003c!-- TODO bug: no reset preview icon when only preview is open --\u003e\n\u003c!-- TODO doesn't work with emmet:increment (only works when cursor is moved afterwards) --\u003e\n\u003c!-- TODO thinner icons (because of new vscode icons) --\u003e\n\u003c!-- TODO infinite zoom --\u003e\n\u003c!-- TODO still open a new tab when the tab is left and hidden --\u003e\n\u003c!-- TODO fix themify icons --\u003e\n\u003c!-- TODO always scaleToFit --\u003e\n\u003c!-- TODO rename style.body to style.html or vice versa (currently the setting is names style.html but in the code it is referred to as style.body) --\u003e\n\n## Features\n\n- Live editing of svg files and svg's inside files\n- Panning and zooming of the preview (up to 32767%)\n\n## Commands\n\n| Command                               | Keybinding   |\n| ------------------------------------- | ------------ |\n| Svg Preview: Open Preview to the Side | `ctrl+alt+p` |\n| Svg Preview: Reload Preview           | none         |\n\n## Settings\n\n| Property              | Description                                                                           | Default |\n| --------------------- | ------------------------------------------------------------------------------------- | ------- |\n| svgPreview.autoOpen   | Automatically open the preview when a svg file is opened                              | `false` |\n| svgPreview.scaleToFit | Whether or not the svg should be scaled to fit the viewport or keep its original size | `true`  |\n| svgPreview.style      | Custom style for the preview                                                          | `{}`    |\n\n## How to use the `svgPreview.style` setting\n\nYou can change the background color:\n\n![demo of the svg preview with white background](./demo_images/demo_white_background.png)\n\n```json\n{\n  \"svgPreview.style\": {\n    \"html\": {\n      \"background\": \"white\"\n    }\n  }\n}\n```\n\nOr you can make a checkerboard background:\n\n![demo of the svg preview with a checkerboard pattern background](./demo_images/demo_checkerboard_background.png)\n\n```json\n{\n  \"svgPreview.style\": {\n    \"html\": {\n      \"background-position\": \"0 0, 13px 13px\",\n      \"background-size\": \"26px 26px\",\n      \"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)\"\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimonSiefke%2Fvscode-svg-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSimonSiefke%2Fvscode-svg-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimonSiefke%2Fvscode-svg-preview/lists"}