基礎編Tweetこの記事のターゲットとなる方この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。記事を読みながら一緒に書いてみてください。SVGは他の画像形式と何が違うの?この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか?たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。SVGはJPEGやPNGと明確に違うところがあります。SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。GIFアニメーションのようなパラパラ漫画ではない、滑らかなアニメーションを制作したり、JavaScriptで画像内の要素を操作するといったこともできます。ラスターグラフィックとベクターグラフィックたとえばJPEGやPNGという画像形式は「ラスターグラフィック」と呼ばれ、Photoshopで扱うのに適しています。ラスターグラフィックは拡大するとぼやけて見えたり、1つ1つのピクセルが拡大されてカクカクして見えます。それに対して、SVGは「ベクターグラフィック」の一種です。ベクターグラフィックは、拡大しても荒く見えないという特徴があります。いまWebでベクターグラフィックが重宝されているかというと、「スマートフォンやタブレットのディスプレイの密度が年々上がっている」ということが挙げられます。ディスプレイの密度が高くなると、今までは鮮明に見えていた画像がぼやけて見えてしまうという問題が起こります。ディスプレイの高密度化に対応する場合、JPEGやPNGでは画像の幅や高さを大きくするしかありません。それではファイルサイズが増えてしまいます。SVGのようなベクターグラフィックスであれば、ファイルサイズはそのままで高密度ディスプレイに対応することができます。SVGが「書ける」と何の役に立つの?一般的なWebデザイナーの方であれば、SVGはIllustratorやSketchのようなアプリケーションで図形を制作し、アプリケーションのSVG書き出し機能を利用して書き出すものかと思います。SVGのコードを自分で書いて図形を作成するというのは、かなり難しそうに思えるかもしれません。いうWebサイトからダウンロードしたアイコン素材の色を変更するときに、アイコンのSVGファイルをテキストエディターで開き色を変更します。一般的には、このような時はIllustratorやSketchなどで開いて色を変更し、SVGファイルとして書き出すかもしれません。この場合、テキストエディターでSVGファイルを開き、色を変更した方が有利な点がいくつかあります。Iconsで配布されているアイコンのSVGファイルは、容量が極力削減されています。Illustratorなどで書き出したSVGファイルは容量が多くなってしまうため、容量を小さくするためにSVGOなどの容量削減ツールを使用する必要があり、手間がかかってしまいます。SVGファイルをテキストエディターで開けば、色を変える程度の処理であれば10秒程度でできます。SVGの書き方の基礎を理解するだけで、SVGファイルを使用したWeb制作の時間を節約できたり、ファイル容量の削減などの処理もやりやすくなるでしょう。SVGの書き方に詳しくなれば、SVGを使用したアニメーションの制作なども可能になります。この記事ではSVGの基礎的な書き方について解説します。好評であれば続編記事も書きたいと思っておりますので、ご興味ある方はこの記事をSNS等でシェアしていただけると幸いです。SVG要素の書き方たとえばIllustratorでアイコンなどをつくるとき、まずは[新規]ダイアログからアートボードのサイズを指定して新規作成すると思います。それと同様に、SVGをテキストエディターで書く場合はSVG要素を書き、その中に属性としてviewBox、幅、高さなどを指定します。今回やることは、Illustratorで例えると「幅300px、高さ300pxのアートボードを作成する」ことです。その場合、記述するSVG要素は以下のようにします。0)として、水平(横)方向がX、垂直(縦)方向がYとなります。今回制作する画像は、X座標とY座標がそれぞれ0の位置から開始されるため、viewBoxの最初の2つの値はそれぞれ「0」となります。今回制作するSVGのviewBox(アートボードのようなもの)の大きさは、幅、高さともに300pxとします。その場合、viewBoxの残り2つの値は「300」となります。それぞれの値の間は半角スペースで区切ります。height属性を使用して、こちらにも幅と高さを指定します。今回制作するSVG要素は、Illustratorのアートボードオプションで例えるとこのような関係になります。heightの2箇所に指定する必要があります。実際に書いてみましょう。PCで以下のCodePenのリンクをクリックしてください。https://codepen.io/pen/すると新しいタブが開きますので、「HTML」の欄に以下のようにSVG要素を書いてみてください。viewBoxのBは大文字ということに気をつけてください。</svg>CodePenは、画面右上からサインアップ(新規登録)またはログインすることにより記述したコードを保存することもできます。この記事では基本的にJavaScriptを書くことはありません。そこで、CSSとJavaScriptの間の境界線を右方向にドラッグすると、以下のようにHTMLやCSSを書く領域を広げることができます。CSSでページ背景に色をつけるCodePenでは下にプレビューが表示され自動的に更新されますが、この時点ではただ真っ白に表示されているだけです。これではSVG領域の大きさなどもわからないため、CSSでSVGの領域だけ色を変えてみましょう。CSSの枠の中に以下のように書いてみます。#fff;}これでページ全体(SVG以外の領域)は薄い灰色に、SVGの領域は白色になったはずです。HTMLやCSSのコードの下にプレビューが表示されます。見えない場合はページ全体をスクロールしてください。線を引いてみようまずはXとYがそれぞれ0の座標から、viewBox(アートボード)一番右下のXとYそれぞれ300の座標まで斜めの線を引いてみましょう。イメージとしては、以下のような感じです。SVG要素の内側にline要素を以下のように書いてみてください。線の色はred、線の太さは3pxとします。stroke-width="3"/></svg>これで斜めの直線ができたはずです。Pen]をクリックし、[HTML]ボタンをクリックすると確認いただけます。これだけでは物足りません。Illustratorでは、たとえば線を破線に変更できます。このような表現はSVGでも可能です。Illustratorの[線]パネルとSVGの関係。[線分]は破線の見えている部分、[間隔]は破線の見えない部分を指定します。属性を追加してみましょう。書き換えることで、線が見えている部分と見えていない部分の比率を変更できます。長方形を作ってみよう続いて長方形を作ってみましょう。長方形を作るには、rectという要素を使用します。line要素の次の行に以下のコードを書いてみましょう。xとyに長方形の左上部分の座標を入れ、幅と高さを指定します。線幅は5、線の色はgreenとします。fill="yellow"/>角丸長方形にするには長方形を角丸長方形に変更するには、たとえばIllustratorでは[変形]パネルで[角丸の半径]を10pxなどに変更します。SVGでは、角の丸みをX軸方向とY軸方向にそれぞれ指定できます。今回は角の丸みを10pxとします。その場合rxとryの属性値をそれぞれ10にします。Pen]をクリックし、[HTML]ボタンをクリックすると確認いただけます。テキストを配置しようSVGにはテキストをそのまま配置できます。フォントファミリー(フォントの種類)はもちろん、フォントサイズや左揃え・中央揃えなども指定することが可能です。今回は、viewBox(アートボード)の中央にテキストを配置してみましょう。指定し、フォントサイズ30pxで「Text」という文字列を配置したいと思います。表示したい文字列は、テキスト要素の開始タグと終了タグの間に書くということに気をつけてください。Text</text>文字の色はfillで、揃えはtext-anchorで指定します。左揃えはleftではなくstart、中央揃えはcenterではなくmiddleということに気をつけてください。Pen]をクリックし、[HTML]ボタンをクリックすると確認いただけます。好評であれば続編記事も書きたいと思っておりますので、ご興味ある方はこの記事をSNS等でシェアしていただけると幸いです。スマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。PHP徹底入門講座・WordPressカスタマイズ講座を開きます「PHP徹底入門講座」は、「HTMLはわかるけどプログラミングは未経験」の方向けの日曜講座です。プログラミングを始めてみたい方は、まずはこちらへどうぞ。別途、「WordPressカスタマイズ講座」も開講します。管理画面から更新可能な中小企業サイト」制作までやります。スマートフォンやRetinaディスプレイに対応した新しい内容にリニューアルしました。渋谷にお越し頂くのが難しい場合、ご自宅で動画受講も可能です。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。SVGAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。2019年12月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。年末年始にWebデザインを学び直すための3つのステップこの記事は、以下のような方を対象にしています。