SVGエディタ「Boxy SVG」ショートカットや使い方メモ

このエントリーをはてなブックマークに追加


google Chromeの拡張機能でダウンロードできるSVGエディタ「Boxy SVG」

https://boxy-svg.com/main.html

Apple StoreにMAC版もあるみたいですね

SVGで遊ぶのに無料でSVGが作れるエディタは何が良いのか調べてたら、「Boxy SVG」がとてもとっつきやすそうだったので触っています

ちょいちょい追記・更新していくと思います

ツールメニュー

見たままな感じなので割合
選択ツールは対象をクリックして選択するものと囲って選択するものがある
右側のパネルメニューと連携して動作する

curveツールは曲線、2点目を置く時はマウス押しっぱなしで描けます

パネルメニュー


「FILLパネル」
塗りつぶし、グラデーションなど



「STROKEパネル」
枠線を付けたり、その加工



「COMPOSTINGパネル」
opacity→透明度(0~1)
Blend Mode合成


「TYPOGRAPHYパネル」
フォントの設定、フォントのままなら後でも変更可能
フォント検索もあるけど広げれないので種類が多過ぎるのも難点
そのフォント名がサンプル表示で書かれてるのは良いですね


「VIEWパネル」
キャンパスの設定、サイズ変更


「ARRANGMENTパネル」
相対させる対象を選んで、そこを基準点に位置変更や回転などが可能



「DEFSパネル」
パターン、シンボル・スタンプみたいな
作成したグラフィックを選択し、メニューの「+」ボタンを押すと、リストパネルに登録
ドラッグドロップでペーストできます
DEFS(definitions)という事は、コード上のpathが複製されるのではなくてCSVコード内で処理が書かれるのかな


「MASKパネル」


「GMOMETRYパネル」位置、サイズ、回転
選択しているパーツを単純に移動させるだけなら矢印キー
細かい座標を決定するならGMOMETRYパネルのX.Yで変更可能です
WidthとHeightで拡大縮小(ファイル上?)
Rotateで角度




「PATHパネル」
pathの切り出しや結合処理
Combine→選択しているpathを結合する
Break Apart →選択しているパスを独立させる



「EXPORTパネル」
PNGかJPEGにして出力



ショートカットキー

動作 キー
新規作成Ctrl + N
選択しているOBJを使って新規作成Ctrl + Shift + N
ファイルを開くCtrl + O
保存Ctrl + S
名前を付けて保存Ctrl + Shift + S
閉じるCtrl + W
アプリ終了Ctrl + Q
Undo(1工程戻る)Ctrl + Z
Redo(1工程進む)Ctrl + Z
削除Back Space
カットCtrl + X
コピーCtrl + C
ペーストCtrl + V
複製Ctrl + D
grab paint colorQ
複数選択シフトを押しながら
全選択Ctrl + A
全解除Ctrl + Shift + A
ショートカット表示未定義
ズームイン= ※変更必要かも
ズームアウト-
ズーム100%1
が収まるように表示2
横幅を100%に表示3
縦幅を100%に表示4
画像ずべてが収まる様に表示5
+90℃回転Ctrl + Shift + Right
-90℃回転Ctrl + Shift + Left

作成したSVGファイル

作成したSVGファイルのコード
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 113 118" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs>
    <style id="bx-google-fonts">@import url(https://fonts.googleapis.com/css?family=Basic:400|Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic);</style>
    <pattern id="pattern-0" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
      <path d="M 0 0 L 50 0 L 50 100 L 0 100 Z" style="fill: black;"/>
    </pattern>
  </defs>
  <ellipse cx="56.749" cy="52.627" rx="47.02" ry="43.847" style="stroke-width: 0.231; fill: rgb(239, 174, 174);"/>
  <path d="M 52.921 -108.284 Q 54.342 -113.196 55.762 -108.284 L 66.195 -72.197 Q 67.615 -67.285 64.774 -67.285 L 43.909 -67.285 Q 41.068 -67.285 42.488 -72.197 Z" style="stroke-width: 0.313; fill: rgb(239, 174, 174);" transform="matrix(1, 0, 0, -1, 0, 0)" bx:shape="triangle 41.068 -113.196 26.547 45.911 0.5 0.107 1@976c6fc5"/>
  <text x="45.192" y="42.88" transform="matrix(3.40662, 0.47877, -0.332096, 2.362983, -102.367737, -45.352486)" style="font-family: Basic; font-size: 36px; stroke-width: 0px; white-space: pre;">!</text>
  <text x="63.487" y="51.653" style="font-size: 36; font-family: Roboto; white-space: pre;"> </text>
</svg>

pathが複数あるという事はまとめたい時は合成みたいな事やるのかな
よくわからないけど、海外のコラムだとBoxy SVGは評判の良い生成コードらしい



Boxy SVGへのショートカット作成

Chromeの拡張機能リストから作成可能です


Boxy SVGを使ってみた感想

難しいけど、慣れれば結構遊べそうだな思いました
メニューの日本語版もあると良いんですけどねー

もちっと触ってみます


0 件のコメント :