WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUT調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。2014の1日目の記事です。Bracketsを使ってSVGを編集したり作成する際に便利な拡張機能を紹介します。はい、今年も始まりましたね。アドベントカレンダーです。WEBCRE8.jpではたびたびアドベントカレンダーについて記事を書いていますが、今年は去年大して参加できなかったこのお祭りにフルコミットする所存です。一日2本書くこともあるでしょう。このWEBCRE8.jpに書くのが相応しくない記事については以下の場所に書いていきますので興味のある人は読んでやってください。(glatyou)|noteで、このシリーズではAdobeのコードエディター、Bracketsに関するネタを集めます。小ネタでも感想でもなんでもいいんですが、私は多分拡張機能を中心に記事を書くことになるかなーと思います。いうか今月はほぼBracketsブログみたいになりますwこの記事ではBracketsでSVGを使う際に役に立つ拡張機能を紹介します。行きます!あとSVG自体についての参考資料は以下をどうぞ。MatsudaSVGを編集するときSVGファイルを表示させ、リアルタイムに修正デザイナーの場合はSVGはIllustlatorなんかでベクター画像を作成してSVG形式で書き出すというのが普通でしょう。完成してしまったものをちょっと直す、または納品された側が修正しなければならない場合もあると思います。通常Brackets上でSVGファイルを開いた場合はXMLファイルとして開きます。Previewを使うとその画像としての表示をプレビューしてくれます。中身もそのまま見られるのでリアルタイムにプレビューしながら編集できます。Hintsで問題なく対応できます。デフォルトでもかなりの種類の言語に対応してはいると思うんですが、してなくても需要のあるものについてはこのように拡張が作られたりします。SVGフォントのプレビューアイコンフォントなどのUnicodeも確認できるSVGフォントを一覧することもできます。Fontを使うとフォントそれぞれの形状が確認でき、マウスオーバーでUnicode文字列も確認できます。個人的にはSVGフォントを使うこともうあんまりないですが。あと、フォントによってはBrackets上で表示しようとすると完全にフリーズしてしまうことがあるのでSVGフォントファイルをクリックするときは気をつけてください。Snap.svgを使うSnap.svgはSVGにおけるjQueryの様な存在Snap.svgはSVGを少ない行数で書くことができるようになるJSライブラリーです。これのドキュメントをBrackets上に表示してくれるのがSnap.svg。機能としてはSnap.svgをダウンロードしたときに付いてくるものがそのままBracketsに表示されるだけです。Snap.svg自体についてはSnap.svgの使い方まとめも参考になるでしょう。Raphaël.jsも触ってみたかったんですけど、結局乗り遅れたのでこっちをやってみたいですね。その前にSVG自体をもっと勉強しないとですが...。おわりにひと昔前に比べてSVGの利用はやっと本格化してきています。小さな画像はアイコンフォントで、背景に使うなどで大きかったりリピートしたり、ちょっとしたアニメーションを含むコンテンツはSVG、という感じですかね。Calendarに参加してくれて嬉しい限りです...ブログでBracketsの文字を見るだけでも嬉しいですよ!wまだカレンダーはスカスカなので埋まらない場合は私が書きますが、心やさしいBrackets使いの方、これから参加してくれても非常に嬉しいです。AdventarBracketsがどんなエディターなのかをご存じない方は以下のエントリーをどうぞ。WEBCRE8.jptweethatenafacebook_likewebcre8はTwitterを使っています。