• HOME
  • デザイン
  • SVGの基礎知識と編集方法。便利なSVGエディタもご紹介

SVGの基礎知識と編集方法。便利なSVGエディタもご紹介

SVGはWebコンテンツ作りにおいて汎用性が高い画像フォーマットです。これからWebデザインやグラフィックデザインを勉強するのであれば覚えておいて損はありません。SVGファイルの基礎知識や編集方法を学びましょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/デザイン組織を経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

SVGファイルとは?

SVGファイルはHTMLファイル上で画質を劣化させることなく自在に拡大・縮小できる特徴があり、多くのWebコンテンツで採用されています。

SVGファイルの特徴や、使用の前に覚えておきたい注意点をチェックしましょう。

Webやアプリ制作に欠かせないファイル

SVGはWebコンテンツなどに使用される画像ファイル形式です。Web制作やアプリ制作などに使用されており、一度は目にしたことがあるでしょう。

SVGは2001年にW3Cが勧告し、Web制作の分野で使用されるようになりました。

当時はまだSVGに対応しているブラウザが少なかったため、一般に広く浸透しませんでしたが、現在は利用環境が整っていて、多くのWebコンテンツで利用されています。

JPEGやPNGなどとの違い

SVGがどんな画像フォーマットなのかを知るには、JPEGやPNGのような画像との違いを知りましょう。

JPEGやPNGは『ラスターデータ』に分類されます。ラスターデータはドット状のピクセルや画素が固まって一つの画像を表現しており、拡大すると粗くなることが特徴です。

一方、SVGは『ベクターデータ』に分類されます。点の座標で表現でき、数値のデータで構成されているため、画像を拡大・縮小しても画質を損ねません。また、テキストデータとして編集することもできます。

SVGファイル使用時の注意点

拡大しても美しい画質を維持できるSVGファイルは、使用上のメリットがあります。例えば、高画質ディスプレーに対応できる点や、JavaScriptと組み合わせてアニメーションさせられる点が魅力です。

しかし、どんな場合でも万能に使えるわけではなく、多くの色を必要とする写真などはSVGの利用に向いていません。

多くの色調を使用している風景写真を、ベクターデータで滑らかに表示させようとすれば、膨大なデータ量を必要としてしまいます。Web上で写真を表示させたい場合、ラスターデータを利用するのが普通です。

SVGファイルを作成、編集する方法

SVGファイルはテキストデータで構成されているため、HTMLファイルに直接コードを記述して画像を表示させられます。SVGファイルの作成方法や編集方法をチェックしましょう。

CSSを使って編集する

SVGはXMLがベースとなっており、HTMLファイル上で編集が可能です。ドローソフトを使わなくても、コードを記述して画像を表示させられます。

SVGを表示する方法はいくつかあり、SVGタグを使用し直接記述したりCSSで装飾したりできるため、ドローソフトを扱えなくても画像を作成できるところが魅力です。

対応するタグを入力すれば、円・四角形・多角形・折れ線といった多彩な図形を描けます。

図形の表示サイズ・塗り色・線の色・透明度などの要素を追加できる他、path要素を使えば滑らかな曲線を表現することもでき、自由な図形に編集可能です。

SVGエディターを利用する

Illustratorのようなプロ仕様のドローソフトは、ハードルが高いと感じる人も多いのではないでしょうか。デザイナーではない人におすすめな方法がSVGエディターの利用です。

初めてSVGを作成する場合、ドローソフトを扱う知識を持っていなくても操作しやすいSVGエディターを利用するといいでしょう。SVGエディターの中にはソフトをインストールしなくてもブラウザ上で作業を完結できるタイプのものもあります。

作業効率をアップするためにも、直感的に操作でき、データの書き出しからコードの編集まで可能なエディターの利用がおすすめです。

IllustratorでSVGファイルを扱う

のようなドローソフトでSVGファイルを作成すると、複雑な図形を簡単に作成できます。IllustratorでSVGファイルを作る方法を学びましょう。

アイコンの作り方

Webページに掲載するアイコンを作る場合、カラーモードは『RGB』で新規ドキュメントを作成しましょう。

新規ドキュメント作成時に、作りたいアイコンのサイズでアートボードを作成します。アートボードの数は作りたいアイコンの数だけ指定しましょう。

SVGファイルとして書き出すにはオブジェクトをパス化する必要があるため、作成したアイコンはすべてアウトライン化します。

複雑な曲線を描く場合、不必要なパスのアンカーポイントができないように作成することが大事です。アンカーポイントが多い複雑な図形ほど、ファイルサイズは大きくなります。

また、複数のオブジェクトが混在している状態ではなく、パスを合体し複合シェイプとして1つのオブジェクトにするとファイルサイズを小さくできるでしょう。後からCSSで編集することを考え、色は1色にします。

SVG形式に書き出す方法

アイコン作成の完了後にメニューのファイルから『別名で保存』を選び、SVG形式で書き出します。ファイル形式をSVGに選択すると、オプションの設定が可能です。

SVGオプションにはいくつかの項目があります。CSSのスタイリング方法・フォントや画像の扱い・小数点の桁数などを変更可能です。

データにビットマップ画像が含まれる場合、画像を埋め込みにするか外部ファイルにリンクするかを選べます。ファイルサイズを抑えたい場合はリンクを選びましょう。

小数点の桁数を上げるとパスの精度がアップしますが、ファイルサイズが大きくなってしまうため、高い精度が求められる場合を除き、1~2を選べば十分です。

出典:SVGを書き出す | Adobe Illustrator チュートリアル

無料で使えるおすすめSVGエディター

フリーソフトとして提供されているSVGエディターの中には、無料で使えるにもかかわらず高いクオリティーを備えているものが少なくありません。

気軽にSVGファイルを作成したい人におすすめな、無料で使えるソフトを紹介します。

フリードローソフトのInkscape

Inkscapeはオープンソースのドローソフトとして開発されました。グラフィック制作を趣味にしているアマチュアからプロのデザイナーまで、さまざまなグラフィックデザインの現場で使用されています。

豊富な機能が魅力

丸や四角といった基本シェイプはもちろん、パスを使用した複雑なグラフィックも制作可能です。

Illustratorに匹敵する機能を備えており、ビットマップ画像のトレース機能やリアルタイムで反映されるXMLエディターも備えています。

図形を編集しながらXMLコードの変化を確認できるため、これからSVGを学ぼうと考えている人におすすめです。

Inkscape

ブラウザ上で使えるVectr

Vectrはオンライン上で使用できる無料のベクター画像編集ツールです。

シンプルかつ直感的に操作しやすいインターフェースを備えています。丁寧なチュートリアルがあるため、初めて使用する人でも簡単に操作できるでしょう。

オンラインでどこでも編集可能

Vectrのオンラインサイトにアクセスするだけで、編集作業を開始できます。ソフトのインストールやバージョンアップの手間がかかりません。

アカウント登録やログインする必要がなく、手軽にSVGファイルの作成ができます。動作も軽快なためストレスなく利用できるでしょう。

Vectr

まとめ

SVGはCSSで装飾でき、テキストデータとして後から編集が容易にできるところが魅力です。

HTMLやCSSの基本を理解していれば、編集自体は決して難しくありません。色や表示サイズをCSSで変更できるため、複数の画像をフレキシブルに使いたい時に役立つでしょう。

また、無料のエディターやツールを利用すれば、高価なソフトを購入しなくても気軽にSVGファイルを作成できます。フリーソフトなどをうまく活用しつつ、SVGを取り入れたWebコンテンツ作りに挑戦してみてはいかがでしょうか。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/デザイン組織を経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

Rubyエンジニア2名の爆速採用に成功!2ヶ月で30倍の事業拡大を支える農業ITスタートアップの複業活用法

野菜や米、果物などの生産者と消費者を繋ぐオンライン直販所『食べチョク』を運営するビビッドガーデン。在宅時間をより充実させたい消費者が集まり、事業が急成長している。そこで課題となったのがエンジニア...

オンライン面談のみでテックリードクラスを複数採用!注目ベンチャー企業のwithコロナ時代に向けた採用術とは

日本で唯一のeKYC対応のデジタル身分証アプリを提供するTRUSTDOCK。今後、身分証がデジタルに置き換わるであろう不可逆な未来を実現するためにもエンジニアが必要だった。同社にはコロナ禍にも関...

mrubyを採用したソフトウェアを広げた第一人者・松本亮介が、面倒を感じながらもC言語を愛する理由とは?

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことを中心...

エンジニアとして、社会に新しい価値を提供し続けたい。カンカク志甫氏が考える本業と副業のバランス術

本業と数々の副業を両立させてきた志甫氏。副業を受ける決め手や本業と副業を両立させるコツ、これからのエンジニアのチャンスの掴み方について伺った。

デザイン

お金

採用・組織

グルメ