EmmetでSVGを書く(emmet初心者のために)

本物のページはこちら→svg

Included page "emmet:svg" does not exist (create it now)

私がEmmetを使おうと思った目的はsvgです。
emmetに関しては初心者。zen codingだってあんまりやったことない。
そんな私が勉強しながら書いていきます。

環境設定

まずはSublimeTextでCtrl+Shift+Pで開いたテキストボックスに

Set Syntex:xsl

とする。xslと入力すれば、これをサジェストしてくれる。
そしてemmet:sheat-sheetに書いてあるように

!!!

と書いてこれをCtrl+Eで展開すると
tabを押しても展開できるらしいけど、SublimeにTagプラグインという、自動インデントしてくれるやつを入れてる私にはだめだった。

<?xml version="1.0" encoding="UTF-8"?>

となる。
さて、次は

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

この辺りの決まり文句をやりたいんだけど、これはemmetにはないみたい。登録しなきゃな。
emmetで自分用コードスニペットを登録する
そして私はこんなのを登録した
{
    "snippets": {
         "html": {
              "abbreviations": {
                "svg:full": "xml+!svg+svg"
              },
              "snippets": {
                  "xml": "<?xml version='1.0' encoding='UTF-8'?>",
                  "!svg": "<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>",
                  "svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"\" height=\"\"></svg>"
              }
            }
    }
}

gオブジェクト

はこう書けばいい

g#myobject

emmetにおいて#を書くとその右側はid名になる
これでCtrl+Eで展開すると

<g id="myobj"></g>

こういう風に展開される。
つまり

タグ名#id名

と書けばいいのだ。

サポートサイト Wikidot.com