A set of custom SVG snippets for Sublime Text 2/3

You can write less code-SVG with this package for sublime text 2/3

Install Package Control for Sublime

SVG-Snippets in sublime.wbond

GitHub

Spanish post

Type the snippet shortcode and then press Tab to complete the snippet.

The snippets are listed below in alphabetical order. The '$1' indicates the position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little hard to explain, but any snippet that has a `$1/$2/$3/etc. uses this technique.

circle

  <circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>

circle3

  <circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>
<circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>
<circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>

circleu

  <defs>
    <circle id="$1" r="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>
</defs>

<use xlink:href="#$8"/>
<use xlink:href="#$8" x="$9" y="$10"/>

clippath

  <defs>
    <clipPath id="$1">
        $2
    </clipPath>
</defs>

defsuse

  <defs>

</defs>

<use xlink:href="#$1"/>
<use xlink:href="#$1" x="$2" y="$3"/>

ellipse

  <ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>

ellipse3

  <ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>

ellipseu

  <defs>
    <ellipse id="$1" rx="$2" ry="$3" cx="$4" cy="$5" fill="$6" stroke="$7" stroke-width="$8"/>
</defs>

<use xlink:href="#$9" />
<use xlink:href="#$9" x="$10" y="$11"/>

group

  <g id="$1">

    $2

</g>

line

  <line x1="$1" y1="$2" x2="$3" y2="$4" stroke="$5" stroke-width="$6"/>

lineu

  <defs>
    <line x1="$1" y1="$2" x2="$3" y2="$4" stroke="$5" stroke-width="$6"/>
</defs>

<use xlink:href="#$7" />
<use xlink:href="#$7" x="$8" y="$9"/>

lineargradient

  <linearGradient id="$1" gradientUnits="objectBoundingBox">
    <stop offset="$2" stop-color="$3"/>
    <stop offset="$4" stop-color="$5"/>
</linearGradient>

matrix

  transform="matrix($1 $2 $3 $4 $5 $6)"

path

  <path d="$1" stroke-width="$2" stroke="$3" fill="$4"/>

pattern

  <defs>
    <pattern id="$1" width="$2" height="$3" patternUnits="userSpaceOnUse">
        $4
    </pattern>
</defs>

polygon

  <polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

polygon3

  <polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

polygonu

  <polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

polyline

  <polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

polyline3

  <polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

polylineu

  <defs>
    <polyline id="$1" points="$2" fill="$3" stroke="$4" stroke-width="$5"/>
</defs>

<use xlink:href="#$6"/>
<use xlink:href="#$6" x="$7" y="$8"/>

radialgradient

  <radialGradient id="$1" gradientUnits="objectBoundingBox">
    <stop offset="$2" stop-color="$3"/>
    <stop offset="$4" stop-color="$5"/>
</radialGradient>

rect

  <rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>

rect3

  <rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>

rectu

  <defs>
    <rect id="$1" x="$2" y="$3" width="$4" height="$5" fill="$6" stroke="$7" stroke-width="$8"/>
</defs>

<use xlink:href="#$9"/>
<use xlink:href="#$9" x="$10" y="$11"/>

rotate

  transform="rotate($1)"

scalable

  <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            viewBox="$1" width="$2" height="$3" aria-labelledby="title desc">

                <title id="title">$4</title>
                <desc id="desc">$5</desc>

</svg>

scalableu

  <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            viewBox="$1" width="$2" height="$3" aria-labelledby="title desc">

                <title id="title">$4</title>
                <desc id="desc">$5</desc>

                <defs>



                </defs>


                <use xlink:href="#" x="" y=""/>

</svg>

skewX

  transform="skewX($1)"

skewY

  transform="skewY($1)"

symbol

  <symbol id="$1">

</symbol>
<use xlink:href="#$1"/>
<use xlink:href="#$1" x="$2" y="$3"/>

text

  <text x="$1" y="$2" fill="$3">$4</text>

translate

  transform="translate($1)"

tspan

  <tspan fill="$1" x="$2" y="$3">$4</tspan>

use

  <use xlink:href="#$1" x="$2" y="$3"/>

use3

  <use xlink:href="#$1"/>
<use xlink:href="#$1" x="$2" y="$3"/>
<use xlink:href="#$1" x="$4" y="$5"/>


12,119 2 70