・SVG芸人

・イラストレーター

・複雑GUI会

・Vue.js Japan UG

・deno_ja

hashrock

https://vuefes.jp/2019/

SVG芸人が

よく聞かれる質問

「何でSVG？」

  • なんで数ある技術の中からSVGなの？
  • SVGの何が嬉しいの？
  • っていうかSVG芸人って何？

即答できない

  • 一言で説明しづらい
  • 一切使わなくてもフロントエンドは作れる
  • 使ってるうちに楽しくなってくる系

「使って楽しい」が
伝わればいいな…

お品書き

  • 平成のワードアート
  • 未来のワードアート
  • ワードアートのSVG実装
  • ついでにエディタの実装

ワードアートとは

ワードアート

  • テキストをデザインできるMS Officeの共通モジュール
  • かなり昔のOfficeからある
    • 確認した中で最古のWordArtは1994年
  • https://makewordart.com/

特徴的な極太書体

波打ってる

激しいグラデーション

ドロップシャドウ

3D風変形エフェクト

MS WordでのWordArtの
つくりかた

https://goughlui.com/2014/10/06/tech-flashback-microsoft-powerpoint-version-3-0-1992-4-0a-1994/

1994年（平成6年）

当時のWordArt

令和のワードアート

SVGならどこまでできる？

SVGで作ってみました

踊る

回る

セレクタブル

contenteditable

SVGすごい！

っていうかブラウザがすごい

SVGでのワードアートの作り方

<text x="40" y="80">Hello World</text>

１．テキスト要素

  <text x="40" y="80">Hello World</text>
  <path
    fill="none"
    stroke="blue"
    stroke-width="3"
    d="M 28 152 C 28 152 49 78 100 67 C 151 56 210 164 255 148 C 300 133 295 59 295 59"
  />

２．テキスト

　　曲線

<text x="40" y="80">
  <textPath href="#MyPath">
    Hello World
  </textPath>
</text>
<path
  id="MyPath"
  fill="none"
  stroke="blue"
  stroke-width="3"
  d="M 28 152 C 28 152 49 78 100 67 C 151 56 210 164 255 148 C 300 133 295 59 295 59"
/>

３．テキスト

　　＋曲線

<textPath>を追加

テキストと曲線を

関連付ける

<path
  id="MyPath"
  fill="none"
  stroke="blue"
  stroke-width="3"
  d="M 28 152 C 28 152 49 78 100 67 C 151...."
/>

「d属性」が曲線を定義している

しかし手書きはきつい

リアルタイム編集できれば便利そう…

SVG DOM は DOM Level 2 と互換性を保つように構築されている。

（W3C SVG 1.1 仕様）

SVGもDOMから扱える

ReactやVueなどのFWはSVGに対応している

バインディングも当然可能

Vueで曲線エディタを実装

3次ベジェ曲線

よく使うやつ

<path d="M70 110 C 70 140, 110 140, 110 110" />
<path d="M70 110 C 70 140, 110 140, 110 110" />

a

b

c

d

a

b

c

d

４つの制御点をもとに曲線を描画

ベジェ曲線を手描きしてみよう

<path :d="curvesStr" id="path1" />
  points: [
    { x: 200, y: 200 },
    { x: 240, y: 200 },
    { x: 210, y: 250 },
    { x: 250, y: 250 }
  ]

curvesStr() {
  return this.curves
    .map(i => {
      return `M ${i.points[0].x},${i.points[0].y} C ${i.points[1].x},${i.points[1].y} ${i.points[2].x},${i.points[2].y} ${i.points[3].x},${i.points[3].y}`;
    })
    .join(" ");
}

座標の配列（data内）

computedで文字列化してd属性に渡す

<path :d="curvesStr" id="path1" />
  points: [
    { x: 200, y: 200 },
    { x: 240, y: 200 },
    { x: 210, y: 250 },
    { x: 250, y: 250 }
  ]

curvesStr() {
  return this.curves
    .map(i => {
      return `M ${i.points[0].x},${i.points[0].y} C ${i.points[1].x},${i.points[1].y} ${i.points[2].x},${i.points[2].y} ${i.points[3].x},${i.points[3].y}`;
    })
    .join(" ");
}

この４つの点を

編集するUIを作ればOK

頂点・ハンドルの

ドラッグ

基本的にはHTML要素のドラッグと

変わらないはず

ただし注意点あり

ユーザー単位の世界

（単位なし）

スクリーン単位の世界

（px）

MouseEventから取れる座標は単位px

SVG側の単位に変換が必要

function screenToSvg(point, el, svg) {
  const pt = svg.createSVGPoint();
  pt.x = point.x;
  pt.y = point.y;
  return pt.matrixTransform(el.getScreenCTM().inverse());
}

ユーティリティ関数を作って対応

詳しくはviewBox / getScreenCTMなどの

キーワードで検索

きちんと対応すれば変形がかかった要素内でも

正常にドラッグ可能

ついでに作ったカラーピッカー

派手にする

Drop Shadow

SVGフィルタ

  • defs下に定義する
  • 組み合わせるといろんなフィルタを作れる
    • そのものズバリのDrop Shadowはない
<filter id="dropshadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
  <feOffset dx="5" dy="5" result="offsetblur" />
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5" />
  </feComponentTransfer>
  <feMerge>
    <feMergeNode />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

グラデーション

線形グラデーション

  • (x1, y1), (x2, y2)の２点間をグラデーションする
  • グラデーション定義もバインディングして変更できる
<linearGradient
  gradientUnits="userSpaceOnUse"
  id="rainbow"
  :x1="gradient.start.x"
  :y1="gradient.start.y"
  :x2="gradient.end.x"
  :y2="gradient.end.y"
>
  <stop offset="0%" stop-color="#ff0000" />
  <stop offset="16.7%" stop-color="#ffff00" />
  <stop offset="33.3%" stop-color="#00ff00" />
  <stop offset="50.0%" stop-color="#00ffff" />
  <stop offset="66.7%" stop-color="#0000ff" />
  <stop offset="83.3%" stop-color="#ff00ff" />
  <stop offset="100%" stop-color="#ff0000" />
</linearGradient>

DEMO

https://hashrock-201907-uit.netlify.com/

できなかったこと

  • グラデーションエディタの実装

  • SVG出力（Inkscapeで読むと壊れます）

  • キーボード操作対応

  • 複数選択

  • 3D変形

どうしてSVGなのか？

svgをGUI構築フレームワークとして考えることも可能

http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_01.htm

UIコンポーネント構築のベースとして
使い勝手が良い

自由度が高く
hackyになりにくい

（テキスト周りは除く）

作ったものが
自分の想定を
超えてくる感がある

（個人の感想です）

作ったものの使いみちが特にないので…

https://suzuri.jp/hashrock/2100702/t-shirt/s/white

とりあえずTシャツにしました

Made with Slides.com