※自己責任でお願いします。出来ない方はそっ閉じしてください。
前置き
27インチのフルHDモニターを縦長で利用していたけど横幅が1080では狭いと感じるようになった。横置きに戻してみるといわゆる「縦が足りない問題」が当然の如く発生した。そもそも横より縦が欲しくて縦長で使っていたことを思い出した。WQHDモニターを購入する資金の調達ができないので諦めていたが、ふと「あれをああしたらどうなるか」と思いつき、試行錯誤していたらできたという話。
絵を描けないから作ってみる
※自己責任でお願いします。出来ない方はそっ閉じしてください。
27インチのフルHDモニターを縦長で利用していたけど横幅が1080では狭いと感じるようになった。横置きに戻してみるといわゆる「縦が足りない問題」が当然の如く発生した。そもそも横より縦が欲しくて縦長で使っていたことを思い出した。WQHDモニターを購入する資金の調達ができないので諦めていたが、ふと「あれをああしたらどうなるか」と思いつき、試行錯誤していたらできたという話。
タイルパターンのSVGをChromeでプレビューしている際に継ぎ目がおかしいことに気が付き色々試した。おそらくブラウザに起因しているものだと思われる。
上の画像は左からGoogleChrome、MicrosoftEdge、MozillaFireFox。MSEdgeのものが私の期待している結果。SVGのViewBox内部のみをタイルで表示している。ChromeとFireFoxではViewBoxの外まで表示しているため継ぎ目がおかしくなっている。
ということで今のところSVGをタイル表示させるならEdgeでということになった。アンチエイリアスも少し綺麗にかかっている感じがする。
ブラウザ云々ではなかった。下の画像はViewBoxのサイズでRectを作ってタイルパターンにして継ぎ目だけを500%で比べてみたもの。
左からChromeでwidthが整数の場合、Chromeでwidthが小数を含む場合、Edgeで整数の場合、Edgeで小数を含む場合。
SVGの幅と高さをアドリブで決めており、小数が混ざっていたために繋ぎ目がおかしくなっていただけ。ChromeやFireFoxではそれが極端に出現しているだけ。Edgeでも発生しているが他と比べて影響が小さいだけ。
また、継ぎ目がおかしくなる小数とならないものがあり、そのあたりはよくわからない。とりあえず整数を使えば間違いないのでそうする。既存のものは気になるものだけ修正していく。
あとEdgeのアンチエイリアスが綺麗だと表現したが、強くぼかしているだけ。好き嫌いの分かれるところ。
仮想通貨に興味を持ち少し採掘をしてみたのですがGPUを100%働かせるのでながらマイニングができない。そもそも本気で採掘している人はそれ専用のハードを用意して100パーセントパワーで稼働させていると思うので関係ない話ですが、ながら作業できるように負荷を下げてマイニングしたい方のための話。Windows+GeForce用。
制作時に利用したガイドラインを付けて。
幅をそろえてみたけどメリハリがない感じ。
RPGの武器みたい。
初期設計が悪いとゼロからやり直すことになる。ただ設計段階で完成を頭に描くのは経験とセンスが必要となるのでなかなか大変。
Handbook of Ornamentなるパブリックドメインのオーナメント集を教えてもらった。昔から描き方が気になっていたものが収録されていたので早速挑戦。
収録されているものすべてに挑戦して自分の技術として取り込みたい。
SVGはブラウザでプレビューできるので画像表示ソフトなど必要ありません。しかしファイル名から中身が思い出せず、ちょっとだけ確認したいファイルが大量にあるとブラウザでは少し不便です。SVG用のSusieプラグインがあったのですがあふから利用できませんでした。
諦めてかなりたつのですが、VSCODE内部でSVGをプレビューするという記事を発見、SVGを画像ではなくHTMLで扱うという目から鱗の解決方法を頂きました。
あふ内でブラウザを扱えるafxbrwsというプラグインが存在するのでこれを展開。設定の空いているキー定義に、
相対パスOR絶対パス $P\$F <例>afxbrws.exe $P\$F
として表示させたいSVGファイルにカーソルを合わせてショートカットを押すと、
おおっ!拡大縮小(CTRL+-)程度しかできないけれどプレビューだけなら必要十分です。ありがたやー。
追記:常駐モードだと動作しなくなる場合がありタスクマネージャーからafxbrws.exeを終了させる必要があります。気になる方は非常駐モードにするとよいでしょう。iniファイルの説明には非常駐モードは2にとなっていますが2だと常駐しているみたいで、0だと非常駐になりました。
SVGに対してmin-heightプロパティを設定した時、FireFoxとChromeで挙動が異なったので覚書。
下の結果は二つのブラウザで挙動が異なる。タイプミスとか微調整で手間取ってインデックスが多くなってしまった。
同じ挙動にするにはSVGに設定しているmin-heightをコンテナに対して設定する。
.container { min-height : 200px; } svg { width: 100%; }
上記で横方向は同じ挙動になる。しかし、今度は縦方向で挙動が変わってしまう。SVGをさらにラップするとか、flexにmin-heightを設定するとかで何とかできるが、それぞれに挙動が違って悩ましい。
当ブログのCSSを編集している際に謎の横スクロールが発生した。一応レスポンシブにしているのでスマホでの表示を確認しようとして発見。ページ内のすべての要素は収まっていてはみ出している要素は見つからないのに横スクロールバーが出てしまう。原因は世のウェブデザイナーを悩ませているmargin。
Bloggerで画像を挿入する際に一部の画像を中央に配置しているが、その画像に対して(勝手に)挿入されていた
style="margin-left: 1em; margin-right: 1em;"
が悪さをしていた。画像をすべて調べて消すべきだが手間なので
.separator a { margin-left: 0 !important; margin-right: 0 !important; }
で退治(多分出来ているはず)。.separatorが他で利用されていると問題が再発するかもしれない。
ここで嘆いている人がいるが、本当にmargin-boxが欲しい。
※この表紙は架空の雑誌のものであり、実在材する人物・団体とは関係ありません。
InkscapeでDTPをしてみたいと思ったが勉強不足でままならない。オリジナルファイルは見せられないレベルで汚い。ガイドをたくさん引いたのだがあんなに必要だったのか?現場の作業を見てみたい。
普通に枠線を引くのであれば漫画用アプリで十分な機能は備わっていますが、
少し変わり種を使いたい場合、ドローツールの自由度には敵わないと思います。
新しい表現を模索していてInkscapeにたどり着いた方に向けて、まずは普通の枠線を引く手順を解説していきたいと思います。
Inkscape独自命令ではなくSVGに追加されたものなのでWebサイトでもそのまま使えるのがGood。
paint-orderがなかった頃は上図のような太めの縁取りをしたい場合にひと手間必要だった。単に縁取りをすると下図のように文字がつぶれてしまったからだ。
以前までは下図のように縁取りオブジェクトにフォントオブジェクトなどを重ねる必要があった。
この方法だと手間がかかる上に画像サイズが2倍になってしまう。両方解決できて一石二鳥。フィルストロークダイアログのストロークのタブの順番の項目にあるコレ。このアイコンをクリックするだけで簡単。
うっかりするかもしれないストロークの幅に関して。
となるので、オブジェクトをそのままで表示したくてストローク幅が決められている場合は右のようにストローク幅を2倍に設定する必要がある。
以前描いていた系統のイラストなら多用していてたであろう機能。今はこれでは物足りない。あと、某イラレみたく一つのパスに複数のストロークや塗りを適用できるようにすればよかったのにと思う。Inkscape独自でなくSVGの規格として。
すべてのオブジェクトを表示し、それらに対して様々な操作を行うことができる。レイヤーの操作もできるので従来のレイヤーダイアログの上位版と言える。付随する諸機能も便利。
どれがどのオブジェクトかを知る手掛かりがないので、ラベルを付けるかオブジェクトをメイン画面で選択するか勘で選ぶなどする必要がある。
大体こんな感じ。
レイヤーもしくはグループに対してアイコンが表示される。クリックすることでレイヤーとして扱うかグループとして扱うか切り替えることができる。選択ツールの手間を省くために用意された機能だと思われるが一長一短。
レイヤーだけどまとめて選択することが多いとか、グループだけど個別に選択することが多い場合に切り替えておくと捗る。
パスを操作する時の色を個別に設定できる。色々な色のオブジェクトが混在していてパスの色の選定に悩んでいた方には便利な機能。
オブジェクトを探す際の目印としても利用できる。名前からしてこちらの用途がメイン?
機能上はオブジェクトダイアログと関係ないがついでなので。
特別なことはないがこれまでレイヤーだけとかオブジェクトだけにしか適用できなかった(XMLエディタで直接操作するしかなかった)ものが双方に対して適用可能となった。
私の環境では現在ブレンドとぼかしを同時に使うと右のようにレンダリングエラーが発生する(Windows版とLinux版で確認)。ブラウザ上では正常に表示されるのでInkscapeと私のグラボの相性が悪いだけかもしれない。
ここまで、オブジェクトダイアログ。
0.92で新しく追加されたセレクションセットは既存のグループ化とは似て非なるInkscape独自のグループ化機能です。個人的に欲しいと思っていた、シンプルだけどメリットがとても大きい追加機能です。
従来のグループ化は下図左のような三つの図形の中から三角を挟んだ丸と四角をグループ化すると、
当然右図のように三角の上(または下)にグループ化された丸と四角が配置されます。
しかし場合によっては図形の順番を変えることなくグループ化したい場合があるかと思います。そのような場合に今回追加されたセレクションセットが活躍します。
左のようにセレクションセットに丸と四角を追加すると右のように他のオブジェクトを跨いでのセット化ができます。
Inkscapeが0.92となり、新しく追加されたグラデーションメッシュを試用してみました。
直線はきれいに出せましたが、sのぐにゃっとした部分はこの手法では無理だと判断して中断しました。
ここまでのノードです。
以下はぐにゃりとした形状に挑戦してみた結果です。
エッジにはアンチエイリアスがかからない模様です。
そのアウトラインです。
元の形状は簡単にトレースできるけれど、きれいに引き延ばすのが難しい。特に入り組んでいるところを外へ引っ張り出すところが。切り分け方に工夫が必要だと思われます。
実装されたばかりなのでまだ機能的に不十分だと思われます。これからの拡充に期待しています。
グラデーションメッシュオブジェクトのクローンを作る。クローン元のノードを編集しようとするとクラッシュする。
調べてみると古くからあるバグみたいですが放置されているようです。自分はたぶん使わないと思うけど、使うときは注意を。