HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5でSVGロゴを描く方法をわかりやすく解説

SVGとは？

SVG（Scalable Vector Graphics：スケーラブル・ベクター・グラフィックス）は、XMLを使って2Dグラフィックスや図形アプリケーションを記述するための言語です。記述されたXMLコードは、SVGビューアによって描画（レンダリング）されます。現在、主要なWebブラウザのほとんどが、PNGやGIF、JPGといった画像形式と同じようにSVGを表示できます。

HTML5でのSVGの基本

HTML5では、SVGタグを使うことで、円・長方形・直線などの基本図形を手軽に描くことができます。ここでは、実際にSVGでロゴを描くサンプルを紹介します。ロゴに美しい色合いを持たせるため、linearGradient（線形グラデーション）を定義して使用します。

サンプルコード

以下のコードを実行すると、SVGでロゴを描画できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG logo</title>
   </head>
   <body>
      <svg height="170" width="400">
         <defs>
            <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
               <stop offset="0%"
               style="stop-color:rgb(184,78,43);stop-opacity:1" />
               <stop offset="50%"
               style="stop-color:rgb(241,241,241);stop-opacity:1" />
               <stop offset="100%"
               style="stop-color:rgb(255,141,52);stop-opacity:1" />
            </linearGradient>
         </defs>
         <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
         <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
            x="50" y="86">logo</text>
      </svg>
   </body>
</html>

コードのポイント

  • <defs>：再利用する定義（ここではグラデーション）を格納する要素です。
  • <linearGradient>：左から右へ変化する線形グラデーションを定義しています。始点は濃いオレンジ（rgb(184,78,43)）、中間は白（rgb(241,241,241)）、終点は明るいオレンジ（rgb(255,141,52)）です。
  • <ellipse>：中心座標（cx, cy）と半径（rx, ry）を指定して楕円を描きます。fill属性に「url(#lgrad)」を指定することで、定義したグラデーションを適用しています。
  • <text>：指定した座標（x, y）にテキスト「logo」を表示します。フォントサイズやフォントファミリーも自由に設定可能です。

実行結果

HTML5でSVGロゴを描く方法をわかりやすく解説

このように、HTML5のSVG機能を使えば、画像ファイルを用意することなく、コードだけでグラデーションのかかったロゴを作成できます。拡大しても画質が劣化しないのがSVGの大きなメリットなので、レスポンシブ対応のWebサイトのロゴにも最適です。

  1. HTML5でSVG画像を使用する方法｜img・object・embedタグの使い分けを解説

    HTML5でSVG画像を表示する基本 HTML5でSVG（Scalable Vector Graphics）画像を利用するには、<img>要素または<svg>要素を使用します。SVGファイルをWebページに組み込む方法は主に3つあり、それぞれ特徴が異なるため、用途に応じて適切なものを選択することが重要です。 SVGを読み込む3つの方法 <img>タグ：最もシンプルな方法。JPEGやPNGなどの通常の画像と同じ感覚で扱えます。 <object>タグ：外部リソースとしてSVGを読み込みます。フォールバックコンテンツを指定できるのが特徴です。 &l

  2. HTML5のstrokeText()メソッドでキャンバスにテキストを描画する方法

    HTML5のCanvas（キャンバス）上にテキストを描画するには、strokeText()メソッドを使用します。このメソッドは、指定されたx座標・y座標の位置に、テキストの輪郭線（ストローク）を描画します。デフォルトの色は黒です。strokeText()メソッドの構文strokeText(text, x, y [, maxWidth ])パラメータの説明strokeText()メソッドに渡す各パラメータは以下のとおりです。番号パラメータ説明1text描画するテキスト文字列2x描画を開始する位置のx座標3y描画を開始する位置のy座標4maxWidth許容される最大幅（ピクセル単位）。省略可能です