2021/12/13Retinaディスプレイ対応などを目的として、画像・アイコン・見出しのテキストなどにSVG(ベクターデータ)を使うことが増えています。多数の色調が複雑に表現された画像については、従来通りのラスター画像(JPEG・PNG)の方が向いています。逆に、SVGが力を発揮するのはロゴやアイコンのようなシンプルな形状のオブジェクトに使われます。それほどデザイン性を求められないものであれば(例えば見出しのテキストとか)プログラマーでも作成できそうですね。今回は試しに簡単なロゴをSVGで作成してみます。(※「Webプログラマーでもわかる」ように細かく解説していきます)ビットマップデータとは?Photoshopの画像データやデジカメで撮影した写真のことで、画像や色のついた点(ドット)の羅列・集合として表現したデータのことです。ビットマップデータは別名で「ラスター形式」と呼ばれることもあります。BMP、GIF、JPEG、PNG、TIFFなどがこれに当たります。以前に作成したBootstrapのSassをカスタマイズしたテンプレートのロゴ(150×50)をSVGで作成します。手元にあるIllustratorのバージョンがCS5.1なので、それで説明します。なっていますが、多分そんなに違いはないかと。不要なレイヤーを削除SVGに書き出し動作確認(プレビュー)1.新規ページの作成ファイルメニューから「新規」を選択します。ダイヤログが表示されるので必要事項を設定します。矢印で示す詳細ボタンをクリックすると、より細かな指定が可能になります。「OK」ボタンを押すと、新規ページが表示されます。「文字ツール」を選択してアートボードに文字を入力します。「アピアランス」で塗りを白色にします。次に文字をアウトライン化にします。先ほど入力した文字のレイヤーを選択した状態でアウトライン化します。【表示】>【アウトライン】でアウトライン化を確認します。以下のような図になっていればOK。4.不要なレイヤーを削除もし、ここで不要なレイヤーがあれば削除します。非表示にしたレイヤーでもSVG出力ではSVGスタイルプロパティ「display="none"」として保持されてしまうからです。5.SVGに書き出しメニューから【ファイル】>【保存】その後、【ファイルの種類】でSVGとして保存。「SVGオプションダイアログ」が開かれるのでオプションを設定します。基本、デフォルトの設定値で問題ありません。6.動作確認(プレビュー)Illustratorから出力された「logo.svg」を読み込んで表示してみます。上記のように表示されていればOKです。SVGファイルなので拡大縮小しても画像が荒れません。スマホで見てもクッキリと文字が見えることが確認できるかと思います。【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。気づいたことや新しい発見など情報を発信していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。独学で学習するなら動画学習が断然おススメ!Laravelが学べる評判の動画学習サイト3つご紹介します!PHPエンジニアとしての就職、転職、フリーランスに関しての情報はコチラ!Laravelが学べるプログラミングスクールに関しての記事をまとめています。アプリのチュートリアルをよく見ますよね。/まとめ環境構築PHPフレームワークのひとつであるLaravelを専門に書いている学習サイトです。