Add SVG snippet to Sublime text

See the Pen Animated SVG stroke-dasharray by Sten Hougaard (@netsi1964) on CodePen.

I love that can now be used inline in HTML. In case you do not know what it is, here is a brief description:

Scalable Vector Graphics is a XML based format which allows you to use human readable text (tags) to draw using scalable (vector) elements like circle, line, path and polyline. It is a w3c standard and can be used not only in browsers but also in drawing programs like Adobe Illustrator and Sketch. It is stored in a text (xml based) file with the typical extension “.svg”.

Start using SVG in

The text editor, Sublime Text which is using packages to extend it self. It has however at the time of writing no SVG package, however on Github you find a collection of snippets.

The repository “SVG for Sublime Text 2/3” is a set including some basic SVG tags, and here is how you install them:

Install SVG snippets in Sublime Text (2).

  • Open the repository SVG Snippets for Sublime Text 2/3 in a browser

  • Download the Zip file (find it in the right bottom side of the page)

  • Unpack the Zip file

  • In Sublime Text open the “Command palette” – on OSX: ⌘+⇧+P and enter brow+⏎ (Browse Packages)

  • Now you see the packages folder. Open the HTML folder. We will now copy the SVG snippets into that folder.

  • Copy all the SVG Snippet files into the HTML folder (Snippets end with “.sublime-snippet”

Using SVG snippets

The SVG snippets can be used from within any HTML file. As the file states currently you can use these snippets:

Type To get
svg + ⇥ <svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid"></svg>
circle + ⇥ <circle cx="20px" cy="20px" r="20px" fill="#64CDAC"></circle>
rect + ⇥ <rect x="0" y="0" width="50px" height="50px" fill="#BBCD71"></rect>
path + ⇥ <path d="M0,0 L100,100" stroke="red" stroke-width="2px" fill="#&lt;64CDAC"></path>
line + ⇥ <line x1="0px" x2="100px" y1="0px" y2="0px" stroke="#000000" stroke-width="3px"></line>
polyline + ⇥ <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
group + ⇥ <g transform=" translate(0,0)"></g>
text + ⇥ <text x="0" y="0" fill="#000000" font-size="20px">Demo</text>
tspan + ⇥ <tspan x="0" y="0" dx="0" dy="">Lorem Ipsum</tspan>

I did find that I needed to change the tabTrigger for SVG to “svg1”, seems that there was another trigger for SVG in my setup.

Related content


Leave a Reply