SVG:どのブラウザーでも機能するHTML5グラフィックを作成する

開示: あなたのサポートはサイトの運営を維持するのに役立ちます!このページで推奨する一部のサービスについては、紹介料を稼ぎます.


ウェブ上の画像を操作する場合、目的に合った正しいタイプのファイルを使用することが重要です。 JPG、PNG、GIFなどの形式はWebユーザーに最もよく知られていますが、必ずしも適切な選択であるとは限りません.

この記事では、SVG(Scalable Vector Graphics形式)の別の種類の画像形式の基本を紹介します。.

SVG:スケーラブルベクターグラフィックス

ベクター形式とラスター形式の画像

画像ファイルの世界では、ラスターとベクターという2つの基本的な形式の形式があります。ラスターベースのフォーマットはピクセルに基づいています。これらの形式には、JPG、PNG、GIFなどのファイルタイプが含まれます。.

ピクセルベースの性質上、ラスターイメージはビットマップイメージと呼ばれることもあります。もちろん、ピクセルは、ウェブ上に表示されるほとんどのデジタル画像の小さな正方形のビルディングブロックです.

近くで(通常は)拡大ズームで見れば、画像がラスターベース(またはビットマップ)の画像であるかどうかがわかります。何百万もの小さな正方形が十分に高い解像度(特に、ある色が別の色に変わる場所)で表示される場合は、ピクセルを表示しているため、ラスターイメージになります。.

一方、ベクターベースのグラフィックは、テキストベースのXMLに保存された直線と曲線に基づいています。それらは数学的理論に大きく基づいており、その結果、作成、開き、編集するには特別なコンピュータープログラムが必要です。.

ベクターベースの画像はイラストであるため、写真には適していません。ただし、写真に基づいてアーティストが作成した画像はSVGで作成できます。ロゴはおそらく他のブランド固有のイラストとともに、WebでのSVGの主な使用法です.

フォントと書体もベクター形式で作成されるため、文字のエッジがくっきりときれいになります。 Photoshopやその他の画像編集アプリでラスター画像の上にテキストを追加したことがある場合-たとえば、ウェブサイトのヘッダーを作成した後-少しでもサイズを変更しようとした場合、テキストは時々縁がぼろぼろに見える.

これは、ベクター形式とラスター形式の違いによるものです。 SVG形式はここに行く方法です.

SVGの利点

SVGは、名前から想像できるように、ベクターベースのグラフィックです。それらは解像度に依存しません。これを、グラフィックが表示されるモニターまたは画面の解像度に依存するラスターグラフィックと比較してください。.

そのため、ラスターグラフィック(JPGファイルやPNGファイルなど)を拡大すると、画像がますますぼやけたり歪んだりするのがわかります.

SVG形式ではできません。画像自体を歪ませることなく拡大および拡大できます.

これは、SVG形式の性質により可能になりました。ピクセルベースではなくテキストベースであるため、完全性や細部の鮮明さを失うことなく画像のサイズを変更できます.

この機能だけでも、特に複雑なロゴや他のWebサイトのグラフィックスなど、ブランドに依存する画像の場合、SVGが非常に役立つファイルになります。 SVGは将来のプロジェクトに合わせて自由にサイズ変更できるため、SVGはWebサイト作業用の非常に柔軟な形式になります.

SVGファイルを使用するもう1つの利点は、SVGファイルの保存と送信がより効率的になることです。 SVGは、個々のピクセルの膨大なコレクションではなく、非常に正確な数学的記述です。結果のSVGファイルは、ラスターベースの形式でレンダリングした場合と同じ画像よりも小さくなります.

SVGは、画像のすべての要素とアスペクトのアニメーションをサポートしています。それらはテキストベースであるため、検索やインデックス付けが可能で、圧縮も可能です。.

SVGの欠点

SVG形式の画像ファイルを使用することには、主な欠点が1つあり、それは互換性です。 SVGでの作業を処理できるソフトウェアが必要です.

Adobe Illustratorなどの一部のプログラムは、ラスターベースの画像の操作に利用できる多数のエディター(多くは無料)とは異なり、それらの画像を操作する必要があるすべてのユーザーがすぐにアクセスできるわけではありません。.

ただし、InkscapeはSVGファイルを処理できる無料のオープンソースエディターです.

その他のベクター形式の拡張機能

SVG(スケーラブルベクターグラフィック)に加えて、基本的なベクターファイル拡張子には次のものがあります。

  • .drw(ベクターファイル)
  • .eps(カプセル化されたPostScript)
  • .pct(Macintoshビットマップグラフィック形式)
  • .pif(ベクター画像GDF形式)
  • .ps(Adobe PostScript)
  • .svf(単純なベクトル形式)

HTML5のSVG要素

HTML要素を使用すると、ブラウザーでSVGを使用していくつかの基本的な形状を作成できます。これらの各要素はタグ内にネストする必要があります.

ライン

要素を使用して、2つの点(始点と終点)で構成される1つの直線を作成できます。もちろん、各ポイントには「x」と「y」という2つの座標があります。

コードは次のようになります。

他の属性を < ライン > 要素:線は色を定義し、線幅は線の太さを制御します.

四角

要素を使用して長方形を作成し、幅と高さの属性で寸法を指定します。以下のコードの抜粋に示すように、塗りつぶしのある色とストロークのある長方形のアウトラインの色を指定することもできます。

サークル

ご想像のとおり、要素は円を作成します。半径40(r属性で設定)で、左上隅から40ピクセル下、横40ピクセルの中心にある緑色の塗りつぶしと黒い輪郭を作成するには、以下のコードを使用します。

cx属性とcy属性を指定しない場合、ブラウザはデフォルト値の「0」を解釈します。

で遊ぶことができるその他の要素には、、、 .

ブラウザのサポート

SVGは、IE8以前のバージョンを除く、利用可能なすべての主要なブラウザーで十分にサポートされています.

SWFについて?

経験豊富なデザイナーと開発者はSWFをよく知っています— Flashアニメーションとグラフィックスのフォーマット— SVGはかなり以前から存在していますが、SVGのサポートが主流になったのはここ数年だけです.

HTML5、CSS、JavaScript、およびSVGを優先してFlashの縮小がサポートされているため、WebプロフェッショナルがSVGとSWFの違いを理解し、最新のテクノロジーの使用方法を学ぶことが重要です.

SWFとは?

SWFはSmall Web Formatの頭字語です。これは、グラフィック、アニメーション、埋め込みアプレットウィジェットに使用できるAdobe Flashファイル形式です。 SWFコンテンツをレンダリングするには、Flashプラグインをブラウザーにインストールする必要があります.

SWFは長い間存在しており、有資格の開発者の大規模なプールによってサポートされており、多くのビルド済みのSWFアニメーションとチュートリアルがすぐに利用できます。.

SVGとSWFの類似点と相違点

SWFとSVGはどちらもベクターグラフィックファイル形式であり、どちらもスクリプト化してアニメーションやインタラクティブ機能を作成できます。このように、それらは似ています。ただし、SWFとSVGが異なる点はたくさんあります。.

SVGはオープンスタンダードです

SVG標準は、World Wide Webコンソーシアム(W3C)によって開発され、その結果、完全にオープンで、自由に使用および構築できます。一方、SWFはAdobeが所有する独自のFlash形式です。 2008年、アドビはSWFの使用を制限する多くの制限を削除しましたが、SWFは独自の形式のままです。.

SVGは扱いやすい

SVGコードは人間が読めるプレーンテキストXMLです。 SVGはプレーンテキストエディターを使用して作成でき、シンプルなSVGの作成は簡単で、HTML、CSS、JavaScriptなどのWeb言語に精通している人なら誰でもすぐに習得できます。 SWFは、Adobe After Effectsなどの複雑なプログラム、またはMotion-Twin ActionScript 2 Compilerなどのオープンソースの代替手段で作成および編集する必要があります.

さらに、アニメーションとインタラクティブ性のためのSVGのスクリプトは、CSSとJavaScriptで実行できます。すべてのWebデザイナーと開発者が日常的に使用する言語です。一方、SWFは、JavaScriptに似ていますが同一ではないAdobeのActionScriptを使用してスクリプト化されており、ほとんどの開発者はそれほど頻繁ではありません.

SVGをWebサイトに追加するのも、他のHTML要素に沿ってコードをHTMLドキュメントにドロップするのと同じくらい簡単です。または、SVGをHTMLドキュメントに埋め込むこともできます。 SWFはHTMLドキュメントに埋め込まれている必要があります.

SVGはSEOに適しています

SVGはプレーンテキストで記述されているため、検索エンジンで読み取ってインデックスを付けることができます。一方、SWFは、検索エンジンが解釈するのが難しいバイナリファイルです。その結果、SVGまたはSWFを使用してコンテンツを配信している場合、検索エンジンのトラフィックがWebサイトにとって重要な場合は、SVGを使用するほうが適切です。.

SVGサポートの拡大

SWFファイルのサポートは、ほとんどのデスクトップWebブラウザーで使用できますが、モバイルブラウザーには当てはまりません。 SWFファイルを含むFlashコンテンツのサポートは、モバイルブラウザーからほぼ段階的に廃止されました。一方、SVGのサポートは、すべての最新のブラウザーによって提供され、新しい機能のサポートが継続的に追加されています.

SVGとSWFの両方が複数のメディアタイプをサポート

サウンドとビデオのコンテンツは、SWFファイルに直接埋め込むことができます。 SVGには、サウンドおよびビデオコンテンツのサポートは含まれていません。ただし、他のHTML5機能はオーディオおよびビデオコンテンツをサポートしており、これらの機能はSVGに直接埋め込むことができます。その結果、オーディオとビデオをSVGに埋め込むことができますが、再生はSVG標準自体ではなく、他のプレーヤーによって処理されます。.

SWFの概要

Flashベースのグラフィックは過去にWebを支配していましたが、将来はCSSとJavaScriptでアニメーション化されたSVGに属しています。次のリソースは、WebデザイナーとWebマスターがスキルを最新に保ち、プロジェクトでSVGの使用を開始するのに役立ちます.

SVGリソース

SVGを使い始めるのに役立つ無料の記事、チュートリアル、ガイドがたくさんあります。ここに最高のもののいくつかがあります.

基本を学ぶ

SVGを使い始めたばかりの場合は、Creative Bloqのこのチュートリアルで、単純な形状の作成と塗りつぶしとグラデーションの使用について確認してください。同じ基本テクニックの多くをカバーする2番目のオプションは、Envato TutsからSVGを開始するためのこのガイドです+.

グラフィックソフトウェアを使用してSVGを作成する

単純な形状よりも複雑なものを作成する場合は、SVG形式でファイルをエクスポートできるAdobe Illustratorなどのベクターグラフィックプログラムを使用する必要があります。 CSS-Tricksのこのクイックガイドでは、Illustratorを使用して、HTMLとCSSのみを使用するアニメーション広告を作成する方法を示します。 illustratorを使用してSVGを作成する方法を学ぶためのもう1つの優れたリソースは、Web Designer Depotにあります.

Adobe Illustratorにアクセスできない場合でも、運が悪いわけではありません。 Inkscapeは、無料でオープンソースのプロ品質のベクターグラフィックプログラムです。 Inkscapeから利用できる多くの優れたチュートリアルもあり、プログラムを開始して、SVG形式で作成したものをエクスポートする方法を示します。.

高度なSVGテクニックを学ぶ

SVGを本当にマスターしたい場合は、2つのリソースを確認して、時間をかけて確認してください。

  • Mozilla Developer NetworkのSVGチュートリアル.
  • 今日のブラウザ向けのSVG入門書, W3Cの無料の電子ブック.

これらのリソースはどちらも広範で、SVGプログラミングに関する現在の考え方と実践のすべてを網羅しています。これらのリソースは初心者向けではありませんが、HTMLとCSSに慣れていて、SVGの操作に習熟したい場合は、これらを利用する準備ができています。.

SVGアニメーションを作成する

SVGを使用して、本当に印象的なアニメーションを作成できます。 SVGの操作に慣れてきたら、印象的なSVGアニメーションを作成する方法を学びたい場合は、次のリソースを確認してください。

  • CSSとJavaScriptを使用してSVGアニメーションを作成するためのDavid Walshのチュートリアル.
  • CSSアニメーションやJavaScriptスクリプトなど、SVGでの作業のすべての側面をカバーするJenkovの広範なチュートリアル.
  • Hongkiatによる、SVGアニメーションを作成するための8つの主要なJavaScriptライブラリのリスト.

その他のリソース

  • Mozilla Developers Network SVGチュートリアル:Mozillaブラウザーで使用するSVG形式のあらゆる側面について説明する進行中のチュートリアル.
  • SVGアニメーションの簡単な紹介:David Walshが書いた素晴らしいチュートリアル.
  • ImageMagickの紹介とリソース:PostScript用のグラフィックツールのコレクション.

結論

グラフィック作品やウェブデザインでSVGを利用することは、慣れ親しんでいることではないかもしれませんが、それらに慣れることは間違いなく価値のある努力です。うまくいけば、上記はあなたの学習を導くのに役立ちます.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map