SVGファイルのインポート

注)バージョン2022.0.0以降の機能となります。


まずは公式のアナウンス内容を見てみよう:
  • ピクセルアートの新たな革命に備えよう!Pixelmash-2022.0がダウンロード可能になり、SVGファイルのインポートによる非破壊の動的ベクターレイヤーに対応しました! Pixelmash のベクターレイヤーは、スケーリングや回転に関係なく、スムーズなアウトラインとストロークの1ピクセル線幅を維持し、Pixelmashに用意されている魅力的なレイヤーエフェクト群の全てに対応し、完全に・忠実に・無限に!変形させることが可能です。
  • 他のピクセルアートアプリケーションではSVGをインポートすると、余計なアンチエイリアス効果が発生し、ぎざぎざイヤンなジャギーや見苦しいストロークの幅ぶれの発生は避けられず、思うように調整することはできません。いっぽうPixelmashでインポートしたSVGレイヤーのピクセルを思い通り完璧に仕上げたい場合は、そのレイヤーを固定解像度のピクセルレイヤーにベイクして、ピクセルを自由に調整するだけです。
  • Pixelmashのダイナミックベクターレイヤーは、これまでにない柔軟なピクセルアート制作を可能にします。ベクターアートソフトウェア(※推奨ソフトウェア:Affinity Designer、Adobe Illustrator、Inkscape)でデザイン作業を開始し、SVGファイルとしてPixelmashにインポートすれば、簡単にピクセルアートに変換することができるようになりました。Pixelmashの高度なアニメーション、レイヤーエフェクト、動的解像度ツールを従来と同じように駆使することで、これらの非破壊レイヤーをビデオゲームやアートプロジェクト用の美しいアセットに素早く変換することができます。

ということで、推奨ソウトウェアであるIllustratorで実際にSVG画像を作成してPixelmashへとインポートしてみよう。
※管理人は大昔に購入したCS5.5で事足りてるのでそのまま使い続けています(スクショがみんなが使ってるであろうCC仕様ではなくて申し訳ない)

やっつけな出来だが、このどこかで見たようなタイトルロゴはペンツールと矩形のパスのみで制作している。また文字列左側の「PIXEL」は画像内プレビュー下段のアウトライン表示で確認できる通り、アウトライン化してパス図形に変換済みである。つまりこの画像には埋め込みフォントなどは存在せず、完全にパスのみで構成されている。
これをSVGファイルとして変換する(画像内最下段参照)。

次に念のためこのSVGファイルが作成元のIllustrator以外のブラウズ環境でも正しく表示されるか確認しておこう。関連アプリとしてMicrosoftEdge(ウェブブラウザ)をWindows11からしつこく強く薦められたので、それに従ってSVGファイルを開いてみる。

正しく表示された。おせっかいなウィンドウとともに。
SVGファイルはベクタ形式データなので、このブラウザでの最大ズームである500%表示でも当然ジャギーはどこにも生じない(スクショ省略)


では、このSVG画像をPixelmashにインポートする。

バージョン2022.0.0以降では画像の通り「File」メニューの「Import Image」が、「Import Image/SVG」に更新されているのでこちらからインポートを行ってもいいし、別ウィンドウで開いているフォルダからドラッグ&ドロップしても構わない。
最終更新:2022年04月29日 19:43