SVG
VSCode

SVG Editor for VSCode Extension

snapshot.png

Introduction

SVG Editor is an extension for visual studio code. It provides the view of text and visual editor at the same time. I made it because there are no extensions to manipulate SVG. This extension is made by TypeScript and Elm. The following explains how to use it and the basic architecture of it.

A method of use

There are several modes such as select, node, shapes, and gradient. Select mode provides normal object selection to move and scale objects. Node mode gives the ability to manipulate nodes of objects when polyline, polygon or path is selected. Shape modes provide shape making, rectangle, ellipse, and polygon for example. Gradient mode defines gradient colors. Defined colors are set in the defs section of SVG and they can be referenced by other objects. Aside from the modes there are some ordinal operations, such as delete, duplicate, scale-up, scale-down and more.

Implementation details

Data delivery

The extension uses previewHtml command to send the text content of the active editor tab to the preview HTML tab. The edited data by moving objects are sent back to the active editor tab as well. A pseudo code of clicking some links as follows is used at this point.

window.parent.postMessage({
   command: 'did-click-link',
   data: `command:COMMAND_NAME?${encodeURIComponent(JSON.stringify(args))}`
}, 'file://');

args is a data array to send back. Original stackoverflow question is here.

To resolve the linkage problem

The implementation of the preview is normal HTML and JavaScript application. It's generated by Elm. There is an ongoing problem where the XML linkage cannot resolve when arranging SVG in the normal way. To display gradient colors for example, it needs to print as an image as follows.

<img src="data:image/svg+xml,PERCENT_ENCODED_SVG">

It is necessary to provide a target for editing objects in the present instance, however, another transparent SVG data will be doubled. In this instance, representation and hit decision are compatible.

Get definitive attributes

Attributes are able to be appended, for example by internal CSS being the consideration point in addition. To get the definitive attritubes of objects, getComputedStyle method is used. getComputedStyle method is a useful way to get the current style for any tags provided by browsers.