├── .gitignore
├── images
├── icon.png
└── preview.gif
├── .vscode
└── launch.json
├── LICENSE.md
├── package.json
├── vsc-extension-quickstart.md
├── README.md
└── snippets
└── svg.json
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug*
2 |
--------------------------------------------------------------------------------
/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sidthesloth92/vsc_svg_snippets/master/images/icon.png
--------------------------------------------------------------------------------
/images/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sidthesloth92/vsc_svg_snippets/master/images/preview.gif
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "name": "Launch Extension",
6 | "type": "extensionHost",
7 | "request": "launch",
8 | "runtimeExecutable": "${execPath}",
9 | "args": [
10 | "--extensionDevelopmentPath=${workspaceRoot}"
11 | ]
12 | }
13 | ]
14 | }
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Dinesh Balaji
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svg-snippets",
3 | "displayName": "SVG Snippets",
4 | "publisher": "sidthesloth",
5 | "description": "A basic SVG snippet generator.",
6 | "version": "1.0.1",
7 | "license": "MIT",
8 | "icon": "images/icon.png",
9 | "galleryBanner": {
10 | "color": "#505050",
11 | "theme": "dark"
12 | },
13 | "engines": {
14 | "vscode": "^0.10.x"
15 | },
16 | "homepage": "https://github.com/sidthesloth92/vsc_svg_snippets/blob/master/README.md",
17 | "bugs": {
18 | "url": "https://github.com/sidthesloth92/vsc_svg_snippets/issues",
19 | "email": "sidthesloth92@hotmail.com"
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "https://github.com/sidthesloth92/vsc_svg_snippets.git"
24 | },
25 | "categories": [
26 | "Snippets"
27 | ],
28 | "keywords": [
29 | "svg",
30 | "snippet",
31 | "snippets"
32 | ],
33 | "contributes": {
34 | "snippets": [
35 | {
36 | "language": "html",
37 | "path": "./snippets/svg.json"
38 | }, {
39 | "language": "xml",
40 | "path": "./snippets/svg.json"
41 | }, {
42 | "language": "svg",
43 | "path": "./snippets/svg.json"
44 | }
45 | ]
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/vsc-extension-quickstart.md:
--------------------------------------------------------------------------------
1 | # README
2 | ## Visual Studio Code Extension - SVG Snippets
3 |
4 | This extension provides the standard SVG code snippets used in all web applications. This saves you a lot of typing
5 | involved while writing SVG elements
6 |
7 | ## Usage
8 |
9 | Type svg- and select the required SVG element from the intellisense dropdown.
10 |
11 | 
12 |
13 | ## Installation
14 |
15 | 1. Install Visual Studio Code 0.10.1 or higher
16 | 2. Launch VS Code
17 | 3. Launch the command palette by using `Ctrl-Shift-P` (Windows, Linux) or `Cmd-Shift-P` (OSX)
18 | 4. Type in Install Extension and select 'Extensions : Install Extensions'
19 | 5. Type `SVG Snippets`
20 | 6. Choose the extension from the drop down and press enter
21 | 7. Reload Visual Studio Code
22 |
23 | ## Supported - SVG elements
24 |
25 | ### A
26 | <a>,
27 | <animate>,
28 | <animateMotion>,
29 | <animateTransform>
30 | ### C
31 | <circle>,
32 | <clipPath>,
33 | <cursor>
34 | ### D
35 | <defs>,
36 | <desc>
37 | ### E
38 | <ellipse>
39 | ### F
40 | <feBlend>,
41 | <feColorMatrix>,
42 | <feComponentTransfer>,
43 | <feComposite>,
44 | <feDiffuseLighting>,
45 | <feDistanLight>,
46 | <feFlood>,
47 | <feGaussianBlur>,
48 | <feImage>,
49 | <feMerge>,
50 | <feMergeNode>,
51 | <feMorphology>,
52 | <feOffset>,
53 | <fePointLight>,
54 | <feSpecularLighting>,
55 | <feSpotLight>,
56 | <feTile>,
57 | <feTurbulence>,
58 | <filter>,
59 | <foreignObject>
60 | ### G
61 | <g>,
62 | <glyph>
63 | ### I
64 | <image>
65 | ### L
66 | <line>,
67 | <linearGradient>
68 | ### M
69 | <marker>,
70 | <mask>,
71 | <missing-glyph>,
72 | <mpath>
73 | ### P
74 | <path>,
75 | <pattern>,
76 | <polygon>,
77 | <polyline>
78 | ### R
79 | <radialGradient>,
80 | <rect>
81 | ### S
82 | <script>,
83 | <set>,
84 | <stop>,
85 | <style>,
86 | <svg>,
87 | <switch>
88 | <symbol>
89 | ### T
90 | <text>,
91 | <textPath>,
92 | <title>,
93 | <tref>,
94 | <tspan>
95 | ### U
96 | <use>
97 |
98 | ## Future Roadmap
99 | <color-profile>,
100 | <feConvolveMatrix>,
101 | <feDisplacementMap>,
102 | <feFuncA>,
103 | <feFuncB>,
104 | <feFuncG>,
105 | <feFuncR>
106 | <font>,
107 | <font-face>,
108 | <font-face-format>,
109 | <font-face-name>,
110 | <font-face-src>,
111 | <font-face-uri>,
112 | <glyphRef>,
113 | <hkern>,
114 | <metadata>,
115 | <view>,
116 | <vkern>
117 |
118 | ## Contact
119 | If you have any issues report them at [Issues](https://github.com/sidthesloth92/vsc_svg_snippets/issues)
120 |
121 | ## Source
122 | [Github](https://github.com/sidthesloth92/vsc_svg_snippets)
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # README
2 | ## Visual Studio Code Extension - SVG Snippets
3 |
4 | This is an for Visual Studio Code IDE. This extension provides the standard SVG code snippets used in all web applications. This saves you a lot of typing
5 | involved while writing SVG elements
6 |
7 | ## Installation
8 |
9 | 1. Install Visual Studio Code 0.10.1 or higher
10 | 2. Launch VS Code
11 | 3. Launch the command palette by using `Ctrl-Shift-P` (Windows, Linux) or `Cmd-Shift-P` (OSX)
12 | 4. Type in Install Extension and select 'Extensions : Install Extensions'
13 | 5. Type `SVG Snippets`
14 | 6. Choose the extension from the drop down and press enter
15 | 7. Reload Visual Studio Code
16 |
17 | ## Usage
18 |
19 | Type 'svg-' in any HTML file and select the required SVG element from the intellisense dropdown. That's it!!
20 |
21 | 
22 |
23 | ## Supported - SVG elements
24 |
25 | ### A
26 | <a>,
27 | <animate>,
28 | <animateMotion>,
29 | <animateTransform>
30 | ### C
31 | <circle>,
32 | <clipPath>,
33 | <cursor>
34 | ### D
35 | <defs>,
36 | <desc>
37 | ### E
38 | <ellipse>
39 | ### F
40 | <feBlend>,
41 | <feColorMatrix>,
42 | <feComponentTransfer>,
43 | <feComposite>,
44 | <feDiffuseLighting>,
45 | <feDistanLight>,
46 | <feFlood>,
47 | <feGaussianBlur>,
48 | <feImage>,
49 | <feMerge>,
50 | <feMergeNode>,
51 | <feMorphology>,
52 | <feOffset>,
53 | <fePointLight>,
54 | <feSpecularLighting>,
55 | <feSpotLight>,
56 | <feTile>,
57 | <feTurbulence>,
58 | <filter>,
59 | <foreignObject>
60 | ### G
61 | <g>,
62 | <glyph>
63 | ### I
64 | <image>
65 | ### L
66 | <line>,
67 | <linearGradient>
68 | ### M
69 | <marker>,
70 | <mask>,
71 | <missing-glyph>,
72 | <mpath>
73 | ### P
74 | <path>,
75 | <pattern>,
76 | <polygon>,
77 | <polyline>
78 | ### R
79 | <radialGradient>,
80 | <rect>
81 | ### S
82 | <script>,
83 | <set>,
84 | <stop>,
85 | <style>,
86 | <svg>,
87 | <switch>
88 | <symbol>
89 | ### T
90 | <text>,
91 | <textPath>,
92 | <title>,
93 | <tref>,
94 | <tspan>
95 | ### U
96 | <use>
97 |
98 | ## Future Roadmap
99 | <color-profile>,
100 | <feConvolveMatrix>,
101 | <feDisplacementMap>,
102 | <feFuncA>,
103 | <feFuncB>,
104 | <feFuncG>,
105 | <feFuncR>
106 | <font>,
107 | <font-face>,
108 | <font-face-format>,
109 | <font-face-name>,
110 | <font-face-src>,
111 | <font-face-uri>,
112 | <glyphRef>,
113 | <hkern>,
114 | <metadata>,
115 | <view>,
116 | <vkern>
117 |
118 | ## Contact
119 | If you have any issues report them at [Issues](https://github.com/sidthesloth92/vsc_svg_snippets/issues)
120 |
121 | ## Source
122 | [Github](https://github.com/sidthesloth92/vsc_svg_snippets)
--------------------------------------------------------------------------------
/snippets/svg.json:
--------------------------------------------------------------------------------
1 | {
2 | "svg-a": {
3 | "prefix": "svg-a",
4 | "body": [
5 | "",
6 | "\t$3",
7 | ""
8 | ],
9 | "description": "The SVG Anchor Element () defines a hyperlink."
10 | },
11 | "svg-animate": {
12 | "prefix": "svg-animate",
13 | "body": [
14 | "$6"
19 | ],
20 | "description": "The animate element is put inside a shape element and defines how an attribute of an element changes over the animation."
21 | },
22 | "svg-animateMotion": {
23 | "prefix": "svg-animateMotion",
24 | "body": [
25 | "",
27 | "\t$5",
28 | ""
29 | ],
30 | "description": "The animateMotion element causes a referenced element to move along a motion path."
31 | },
32 | "svg-animateTransform": {
33 | "prefix": "svg-animateTransform",
34 | "body": [
35 | "$7"
42 | ],
43 | "description": "The animateTransform element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing."
44 | },
45 | "svg-circle": {
46 | "prefix": "svg-circle",
47 | "body": [
48 | "$5"
49 | ],
50 | "description": "The circle element is an SVG basic shape, used to create circles based on a center point and a radius."
51 | },
52 | "svg-clipPath": {
53 | "prefix": "svg-clipPath",
54 | "body": [
55 | "",
56 | "\t$2",
57 | ""
58 | ],
59 | "description": "The clipping path restricts the region to which paint can be applied."
60 | },
61 | "svg-cursor": {
62 | "prefix": "svg-cursor",
63 | "body": [
64 | "$4"
65 | ],
66 | "description": "The cursor element can be used to define a platform-independent custom cursor. "
67 | },
68 | "svg-defs": {
69 | "prefix": "svg-defs",
70 | "body": [
71 | "",
72 | "\t$1",
73 | ""
74 | ],
75 | "description": " element is used to embed definitions that can be reused inside an SVG image."
76 | },
77 | "svg-desc": {
78 | "prefix": "svg-desc",
79 | "body": [
80 | "",
81 | "\t$1",
82 | ""
83 | ],
84 | "description": " element is used to embed descriptions with SVG for accessibility."
85 | },
86 | "svg-ellipse": {
87 | "prefix": "svg-ellipse",
88 | "body": [
89 | "$6"
90 | ],
91 | "description": "The ellipse element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius."
92 | },
93 | "svg-feBlend": {
94 | "prefix": "svg-feBlend",
95 | "body": [
96 | "$3"
97 | ],
98 | "description": "The blend filter can blend input from multiple filters into one."
99 | },
100 | "svg-feColorMatrix": {
101 | "prefix": "svg-feColorMatrix",
102 | "body": [
103 | "$4"
106 | ],
107 | "description": "This filter changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color."
108 | },
109 | "svg-feComponentTransfer": {
110 | "prefix": "svg-feComponentTransfer",
111 | "body": [
112 | "",
113 | "\t$2",
114 | ""
115 | ],
116 | "description": "The color of each pixel is modified by changing each channel (R, G, B, and A) to the result of what the children , , , and return."
117 | },
118 | "svg-feComposite": {
119 | "prefix": "svg-feComposite",
120 | "body": [
121 | "$8"
123 | ],
124 | "description": "This filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor. "
125 | },
126 | "svg-feDiffuseLighting": {
127 | "prefix": "svg-feDiffuseLighting",
128 | "body": [
129 | "",
130 | "\t$4",
131 | ""
132 | ],
133 | "description": "This filter primitive lights an image using the alpha channel as a bump map."
134 | },
135 | "svg-feDistantLight": {
136 | "prefix": "svg-feDistantLight",
137 | "body": [
138 | "$3"
139 | ],
140 | "description": "This filter primitive define a distant light source that can be used within a lighting filter primitive : or ."
141 | },
142 | "svg-feFlood": {
143 | "prefix": "svg-feFlood",
144 | "body": [
145 | "$3"
146 | ],
147 | "description": "The filter fills the filter subregion with the color and opacity defined by flood-color and flood-opacity."
148 | },
149 | "svg-feImage": {
150 | "prefix": "svg-feImage",
151 | "body": [
152 | "$3"
153 | ],
154 | "description": "The filter blurs the input image by the amount specified in stdDeviation, which defines the bell-curve."
155 | },
156 | "svg-feGaussianBlur": {
157 | "prefix": "svg-feGaussianBlur",
158 | "body": [
159 | "$3"
160 | ],
161 | "description": "The filter blurs the input image by the amount specified in stdDeviation, which defines the bell-curve."
162 | },
163 | "svg-feMerge": {
164 | "prefix": "svg-feMerge",
165 | "body": [
166 | "",
167 | "\t$1",
168 | ""
169 | ],
170 | "description": "The feMerge filter allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result attribute and then accessing it in a child."
171 | },
172 | "svg-feMergeNode": {
173 | "prefix": "svg-feMergeNode",
174 | "body": [
175 | "$2"
176 | ],
177 | "description": "The feMergeNode takes the result of another filter to be processed by its parent ."
178 | },
179 | "svg-feMorphology": {
180 | "prefix": "svg-feMorphology",
181 | "body": [
182 | "$4"
183 | ],
184 | "description": "This filter is used to erode or dilate the input image. It's usefulness lies especially in fattening or thinning effects."
185 | },
186 | "svg-feOffset": {
187 | "prefix": "svg-feOffset",
188 | "body": [
189 | "$4"
190 | ],
191 | "description": "The input image as a whole is offset by the values specified in the dx and dy attributes. It's used in creating drop-shadows."
192 | },
193 | "svg-fePointLight": {
194 | "prefix": "svg-fePointLight",
195 | "body": [
196 | "$4"
197 | ],
198 | "description": ""
199 | },
200 | "svg-feSpecularLighting": {
201 | "prefix": "svg-feSpecularLighting",
202 | "body": [
203 | "$6"
204 | ],
205 | "description": "This filter primitive lights a source graphic using the alpha channel as a bump map."
206 | },
207 | "svg-feSpotLight": {
208 | "prefix": "svg-feSpotLight",
209 | "body": [
210 | "$8"
212 | ],
213 | "description": "The feSpotLight element is one of the ligth source elements used for SVG files."
214 | },
215 | "svg-feTile": {
216 | "prefix": "svg-feTile",
217 | "body": [
218 | "$2"
219 | ],
220 | "description": "An input image is tiled and the result used to fill a target. The effect is similar to the one of a ."
221 | },
222 | "svg-feTurbulence": {
223 | "prefix": "svg-feTurbulence",
224 | "body": [
225 | "$6"
226 | ],
227 | "description": "This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble."
228 | },
229 | "svg-filter": {
230 | "prefix": "svg-filter",
231 | "body": [
232 | "",
233 | "\t$6",
234 | ""
235 | ],
236 | "description": "The filter element serves as container for atomic filter operations. It is never rendered directly. A filter is referenced by using the filter attribute on the target SVG element."
237 | },
238 | "svg-foreignObject": {
239 | "prefix": "svg-foreignObject",
240 | "body": [
241 | "",
243 | "\t",
244 | "\t\t$3",
245 | "\t",
246 | ""
247 | ],
248 | "description": "The foreignObject element allows for inclusion of a foreign XML namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing."
249 | },
250 | "svg-g": {
251 | "prefix": "svg-g",
252 | "body": [
253 | "",
254 | "\t$1",
255 | ""
256 | ],
257 | "description": " element is used to group SVG shapes together"
258 | },
259 | "svg-glyph": {
260 | "prefix": "svg-glyph",
261 | "body": [
262 | "",
263 | "\t$3",
264 | ""
265 | ],
266 | "description": "A glyph defines a single glyph in an SVG font."
267 | },
268 | "svg-image": {
269 | "prefix": "svg-image",
270 | "body": [
271 | "$6"
272 | ],
273 | "description": "The SVG Image Element () allows a raster image to be included in an SVG document."
274 | },
275 | "svg-line": {
276 | "prefix": "svg-line",
277 | "body": [
278 | "$7"
282 | ],
283 | "description": "The line element is an SVG basic shape, used to create a line connecting two points."
284 | },
285 | "svg-linearGradient": {
286 | "prefix": "svg-linearGradient",
287 | "body": [
288 | "",
292 | "\t$7",
293 | ""
294 | ],
295 | "description": "The linearGradient element lets authors define linear gradients to fill or stroke graphical elements."
296 | },
297 | "svg-marker": {
298 | "prefix": "svg-marker",
299 | "body": [
300 | "",
306 | "\t$8",
307 | ""
308 | ],
309 | "description": "The marker element defines the graphics that is to be used for drawing arrowheads or polymarkers on a given , , or element."
310 | },
311 | "svg-mask": {
312 | "prefix": "svg-mask",
313 | "body": [
314 | "",
316 | "\t$7",
317 | ""
318 | ],
319 | "description": "In SVG, you can specify that any other graphics object or element can be used as an alpha mask for compositing the current object into the background."
320 | },
321 | "svg-missing-glyph": {
322 | "prefix": "svg-missing-glyph",
323 | "body": [
324 | "",
325 | "\t$1",
326 | ""
327 | ],
328 | "description": "The missing-glyph's content is rendered, if for a given character the font doesn't define an appropriate ."
329 | },
330 | "svg-mpath": {
331 | "prefix": "svg-mpath",
332 | "body": [
333 | "$2"
334 | ],
335 | "description": "the mpath sub-element for the element provides the ability to reference an external element as the definition of a motion path."
336 | },
337 | "svg-path": {
338 | "prefix": "svg-path",
339 | "body": [
340 | "$5"
342 | ],
343 | "description": "The path element is the generic element to define a shape. All the basic shapes can be created with a path element."
344 | },
345 | "svg-pattern": {
346 | "prefix": "svg-pattern",
347 | "body": [
348 | "",
350 | "\t$7",
351 | ""
352 | ],
353 | "description": "The pattern element defines a graphics object which can be redrawn at repeated x and y-coordinate intervals (\"tiled\") to cover an area."
354 | },
355 | "svg-polygon": {
356 | "prefix": "svg-polygon",
357 | "body": [
358 | "$3"
359 | ],
360 | "description": "The polygon element defines a closed shape consisting of a set of connected straight line segments."
361 | },
362 | "svg-polyline": {
363 | "prefix": "svg-polyline",
364 | "body": [
365 | "$3"
366 | ],
367 | "description": "The polyline element is an SVG basic shape that creates straight lines connecting several points."
368 | },
369 | "svg-radialGradient": {
370 | "prefix": "svg-radialGradient",
371 | "body": [
372 | "",
375 | "\t$6",
376 | ""
377 | ],
378 | "description": "radialGradient lets authors define radial gradients to fill or stroke graphical elements."
379 | },
380 | "svg-rect": {
381 | "prefix": "svg-rect",
382 | "body": [
383 | "$6"
384 | ],
385 | "description": "The rect element is an SVG basic shape, used to create rectangles based on the position of a corner and their width and height."
386 | },
387 | "svg-script": {
388 | "prefix": "svg-script",
389 | "body": [
390 | ""
393 | ],
394 | "description": "A SVG script element is equivalent to the script element in HTML and thus is the place for scripts (e.g., ECMAScript)."
395 | },
396 | "svg-set": {
397 | "prefix": "svg-set",
398 | "body": [
399 | "$2"
400 | ],
401 | "description": "The set element provides a simple means of just setting the value of an attribute for a specified duration."
402 | },
403 | "svg-stop": {
404 | "prefix": "svg-stop",
405 | "body": [
406 | "$4"
407 | ],
408 | "description": "The ramp of colors to use on a gradient is defined by the stop elements that are child elements to either the element or the element."
409 | },
410 | "svg-style": {
411 | "prefix": "svg-style",
412 | "body": [
413 | ""
416 | ],
417 | "description": "The style element allows style sheets to be embedded directly within SVG content."
418 | },
419 | "svg-svg": {
420 | "prefix": "svg-svg",
421 | "body": [
422 | ""
428 | ],
429 | "description": "The svg element can be used to embed an SVG fragment inside the current document."
430 | },
431 | "svg-switch": {
432 | "prefix": "svg-switch",
433 | "body": [
434 | "",
435 | "\t$1",
436 | ""
437 | ],
438 | "description": "The element enables you to show different shapes depending on what language the user of the SVG viewer is using."
439 | },
440 | "svg-symbol": {
441 | "prefix": "svg-symbol",
442 | "body": [
443 | "",
444 | "\t$3",
445 | ""
446 | ],
447 | "description": "The symbol element is used to define graphical template objects which can be instantiated by a