WordPressでSVGを使用する方法
公開: 2019-02-15SVGは2000年代初頭に標準化されましたが、ブラウザのサポートが不十分なため、非常に魅力的な画像形式はその日の光をあまり見ていませんでした。 SVGが急速にウェブ上の事実上の画像形式になりつつあるため、これらすべては近年劇的に変化しました。
そして、SVGに夢中になっているのはグラフィックデザイナーだけでなく、全体的な画像サイズを縮小することでブログをスピードアップしたいWordPressユーザーでもあります。 この投稿では、WordPressベースのサイトでSVGを使用する方法のトピックを探ります。
SVGとは何ですか？
SVG（Scalable Vector Graphics）は、Web上およびアプリ内でグラフィックを表示するためのXMLベースの画像形式です。 基本的に、SVGファイルは、SVG画像内で使用されるさまざまな形状と色を指定するXMLコードのコレクションです。
また、テキストエディタでSVGファイルを開くことができるため、基本的なCSS3およびJSコードを使用してカスタマイズすることも簡単です。 その結果、SVGは、その多様な柔軟性のために、現代のWebユーザーに非常に好まれています。
最も重要なのは、W3CがSVGを業界をリードする標準として認識していることです。 そのため、SVGは、DOM、HTMLなどの他のWebベースのテクノロジーと完璧に連携します。
なぜSVGが重要なのですか？
SVG画像はベクターベースであるため、SVG画像は、品質を損なうことなく画面全体で無限に拡大縮小できます。 この点での中心的な相互作用はブラウザXMLです。 ここで、ブラウザは、増加または減少するたびにXML仕様をプロットします。
言うまでもなく、SVGファイルはPNGやJPEGなどの従来の形式よりもはるかに柔軟性があります。 また、CSSとJavaScriptの間の直接的な相互作用は、外出先でSVG画像を適応させることができることを意味します。 これは、新しいデザインなどで作業している場合に重要です。
パフォーマンスに関しては、SVG画像は他のどの画像よりもサイズが大幅に小さくなる傾向があります。 その結果、イラスト、ロゴ、アイコンがベクターグラフィックとして作成されるのが一般的です。 これはまた、多くのアイコンフォントの開発につながりました。これについては、後の記事で簡単に説明します。
一言で言えば、SVGは柔軟性、画像サイズの縮小、WordPressサイトの画像パフォーマンスを向上させるための強力な基盤を提供します。
SVG画像はどのように作成されますか？
SVG画像の作成には、「コード」の記述と最新のグラフィックデザインソフトウェアの使用の2つの方法があります。 XMLスクリプトを作成する最初の方法は、SVGファイルを作成する従来の方法ですが、時間がかかり、非効率的な手法であることが判明する可能性があります。
正方形の単純なコレクションは、XML形式で次のようになります。
ご覧のとおり、複雑なグラフィックスに対してこれを繰り返し書くことは、自分の足を撃つことと同じです。
もう1つの方法はソフトウェアを使用することです。これは、SVGグラフィックを構築するための最も迅速で効率的な方法です。 ベクターベースのソフトウェアを使用すると、グラフィックの作成に集中でき、後でそれらを既製のSVGファイルとしてエクスポートできます。
Affinity Designerは有名なプロのベクター編集プログラムですが、Adobe Illustrator、Sketch、Figma、Inkscapeなどのソフトウェアも同様です。
どのソフトウェアを使用する場合でも、本当に重要なのは、作成するグラフィックの種類の計画だけです。 エクスポート機能は、すべての最新プログラムで同じように機能します。
言うまでもなく、SVGは常に同じXML構造です。 したがって、SVG画像をドキュメントとして使用するだけでなく、インラインで挿入することもできます。
WordPressはSVGをサポートしていますか？
奇妙に聞こえるかもしれませんが、WordPressのスコープを持つプラットフォームは実際にはSVGファイル形式をサポートしていません。 しかし、それは悲惨なセキュリティ上の懸念のためだけです。
ご覧のとおり、PNG / JPG / GIFファイルタイプとは異なり、SVGはラスタライズされた画像ではなくベクターです。 その結果、SVGはJavaScriptの悪用のリスクにさらされており、WordPressはデフォルトでWordPressでSVGを許可しないことを選択しました。 それはすべての観点から理にかなっています。
WordPressの寄稿者は長年SVGについて話してきましたが、セキュリティの問題を大規模に防ぐために取り組むにはあまりにも多くの角度があります。
したがって、これを回避する唯一の方法は、プラグインを使用するか、テーマ関数を使用してファイル形式としてSVGを有効にすることです。
WordPress WebサイトでSVG画像を有効にする方法は？
プラグインの部分に入る前に、テーマディレクトリのfunctions.phpファイルを使用してWordPressでSVGを実際に有効にすることができます。 これは間違いなく最も速い方法ですが、raw形式でSVGを有効にしているため、安全性も最も低くなります。
//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){
$ new_filetypes = array（）;
$ new_filetypes ['svg'] ='image / svg + xml';
$ file_types = array_merge（$ file_types、$ new_filetypes）;
$file_typesを返します。
}
add_action（'upload_mimes'、'add_file_types_to_uploads'）;
そして、もう1つの（より安全な）オプションは、プラグインを使用することです。 WordPressでSVGを有効にするための最も有名なプラグインの3つを次に示します。
SVGサポート
SVGサポートの追加は、戦いの半分です。カスタムスタイル、アニメーションエフェクトを追加し、制限を有効にすることもできます。 しかし、これをすべて行うには、いくつかのサポートが必要です。
SVGサポート付き—従来のImageタグを使用して、投稿やページにSVGファイルを追加し始めることができます。 たとえば、画像に新しいCSSクラス「style-SVG」を追加できます。これにより、アップロードされたSVG画像が取得され、その内容がインライン表示でレンダリングされます。
このプラグインの主な機能は次のとおりです。
- WordPressメディアライブラリ内のSVGファイルの管理を有効にします。
- アップロードされたSVG画像をインラインコードに変換します。
- すべてのSVG画像にAltタグとCaptionタグを追加するための画像ウィジェットをサポートします。
- カスタムCSSを使用して個々のSVG画像のスタイルを設定します。
- CSS3とJavaScriptを使用してアニメーション効果を実装します。
- プラグインのダッシュボード内の詳細な設定ページ。
- 権限ベースのアクセスを強制します。 例：管理者権限を持つアカウントにのみアップロードを制限します。
このプラグインが提供するものにもかかわらず、SVGの悪用のリスクはかなり現実的であることに注意してください。 信頼できないユーザーに対してSVGファイル管理を有効にしないでください。 したがって、理想的には、管理者レベルのユーザーに対してのみこの機能を有効にします。
繰り返しになりますが、アップロード権限を持っている人なら誰でも新しいSVGファイルをアップロードできますが、SVGファイルはXMLに基づいているため、悪意のあるインジェクションなどによる悪用にさらされています。
安全なSVG
Safe SVGは、潜在的なセキュリティリスクを心配するという点で安心できるプラグインの1つです。 プラグインは、新しいSVGアップロードをサニタイズし、悪意のある意図を防ぐために特別に構築されています。 さらに、Safe SVGには、メディアライブラリを介してアップロードしたSVGファイルの種類を確認する機能が追加されています。
50,000人のアクティブユーザーがいるため、Safe SVGを利用して、安全なパフォーマンスの優れた実績を提供できます。 注目に値するのは、このプラグインには2つの異なるバージョンがあることです。 無料と有料。
無料版には、新しいアップロードをサニタイズする機能が含まれており、メディアライブラリ内でのSVG表示のサポートも追加されています。
Proバージョンを選択すると、SVGO最適化などの追加機能を利用できます。 この最適化手法により、SVGアップロードのファイルサイズがさらに削減されます。
また、Proを使用すると、新しいSVGファイルをアップロードできる人とアップロードできない人を選択できます。 その結果、特定のユーザーのみにアクセスを制限できます。 そして最後に、プラグインを購入することで、プレミアムサポートにアクセスできます。最も必要なときにいつでも質問に答えることができます。
完全なSVGサポートを追加する
リストした最初の2つのプラグインで妥当な結果が得られるはずです。 ただし、Shortcodesを使用してサイトにSVGを追加するというアイデアが気に入った場合は、このプラグインを確認してください。
このプラグインは、WordPressにいくつかのSVG機能を追加し、AlexeyTenのアイデアに基づくSVG技術を使用します。 SVG画像をHTMLに含めるこの方法は、現時点でパフォーマンスと互換性の最良の組み合わせを備えているようです。
完全なSVGサポートを追加すると、SVGのアップロードとショートコードの生成が可能になります。 さらに、カスタムCSSを使用して各SVG要素のスタイルをカスタマイズできます。 最後になりましたが、アップロードしたSVGの一部またはすべてのフォールバック写真を指定できます。
WordPress用の他の便利なSVGプラグインは何ですか？
WordPressサイトにSVGサポートを追加する以外に、サイトに役立つ可能性のある他のプラグインはありますか？ 全員とそのおばあちゃんは、パフォーマンスに大きなメリットがあることを知っています。 ファイルサイズだけでなく、ベクターグラフィックをインラインでレンダリングするブラウザ機能の両方の観点から。
WPSVGアイコン
アイコンは視覚的な要素であり、そのような要素はデザインに新しい生命を与える傾向があります。 興味深いことに、このプラグインは個人的な必要性から生まれました。 著者は自分のデザインにもっと多くのSVGファイルを実装し始めたいと思っていましたが、その解決策を見つけることができませんでした。 そこで、彼は時間と労力を費やしてWPSVGアイコンを作成しました。
このプラグインは非常に使いやすく、数回クリックするだけでサイト上の既存のアイコンを置き換えることができます。 何よりも、アイコンが自動的に拡大縮小される最大幅を設定している限り、Retinaディスプレイのすべての画像を再作成する必要はありません。
著者の場合と同様に、このプラグインは、あらゆる種類の開発、マルチサイト、およびクライアント作業に最適です。 制限なしで、テーマの互換性やその性質について心配する必要はありません。
カスタムアイコンのアップロードを可能にする機能を備えたプレミアムバージョンも提供されているようです。 したがって、統合されたアイコンに限定されません。
SVGソーシャルメニュー
これは、SVG画像を介してソーシャルメディアアイコンを表示するためのウィジェットとして機能するプラグインです。 このプラグインを機能させるには、ソーシャルメディアプロファイルへのリンクを含む新しいWordPressメニューを作成するだけです。
その後、カスタムSVGソーシャルメニューの場所を選択し、新しいメニューを保存します。 その後、サイドバーまたはブログの他のウィジェット対応領域でSVGソーシャルメニューウィジェットを使用できます。
現在利用可能なアイコンは、plus.google、WordPress、facebook、twitter、dribbble、Pinterest、Github、Tumblr、Youtube、Flickr、Vimeo、Instagram、LinkedIn、xing / feed、mailtoです。
SVGロゴとテキスト効果
SLATEは、カスタムSVG効果を追加するためのショートコードサポートを可能にするプラグインです。 このプラグインを使用して、強力なブランドイメージを宣伝したり、CTAウィジェットを強調したり、要素を独自の方法で目立たせたりすることができます。 ショートコードサポートのインテリジェントな使用は、いつでもエフェクトを編集およびカスタマイズできることを意味します。
たとえば、さまざまな色、フォント、フィルターを組み合わせて、注目を集めるデザイン効果として現れる多数の塗りつぶしパターンを利用できます。 SLATEは、ベクター編集ソフトウェアと同じくらいクリエイティブな自由を提供しますが、ソフトウェアを使用する必要はありません。
それで、主な機能のいくつかは何ですか？
- 文章。 注意を引くがSEOに適したテキスト効果の効果を再現できるショートコードを生成します。 上記のスナップショットに表示されているものとよく似ています。
- フォント。 カスタムフォントを入手できる場所がわかりませんか？ SLATEにはGoogleFontsの大規模なライブラリがあらかじめパッケージ化されているので、心配はいりません。
- パターンを塗りつぶします。 文字は、選択した塗りつぶしパターンで塗りつぶされます。 塗りつぶしパターンにはパラメータがあります。 さまざまなサイズ、距離、色を制御して独自のバリエーションを作成するか、デフォルトを使用してください。
そしてもっとたくさん！ このプラグインは、テキストとロゴを非常に正確にスタイリングするための強力な機能です。 そしてSVGを通じて、それ以下ではありません。
SVGグラフィックはどこにありますか？
ベクターグラフィックデザインの専門知識がない場合はどうすればよいですか？ 幸いなことに、最近のSVGを見つけるのは簡単で簡単です。 せいぜい、グラフィックを作成した元の作者にリンクするだけです。 また、多くのプラットフォームでは、帰属を表示せずに無料の画像を提供しています。
ここに無料のSVGコンテンツを提供するいくつかの素晴らしいサイトがあります：
- FontAwesome —FontAwesomeは世界で最も素晴らしいフォントアイコンライブラリです。 このプロジェクトは何年にもわたって強力に進んでおり、ブラウザだけでなく、特定のフレームワークや設計ソフトウェアも徹底的にサポートしています。 このアクセシビリティ指向のフォントパッケージは絶対的なキラーであり、とても簡単に使用できます。 実際、FontAwesomeのサポートを提供するWordPressプラグインは12個あると確信しています。
- Vecteezy — Vecteezyは、間違いなく地球上で最大のベクターグラフィックプラットフォームです。 カスタムデザイン、コミュニティの貢献、およびWebベースのデータに支えられて：Vecteezyには、あらゆる種類のカテゴリ、形状、または形式で利用可能なベクトルがあります。 また、ファイルのダウンロードも非常に簡単です。 あなたがしなければならないのはあなたがファイルを入手した著者ページに戻るリンクです。 これは私が頻繁に使用しているサイトです。
- SVGの背景—最新のWebデザインのトレンドに追いついていますか？ 現在、デザインが探求されているクリエイティブな分野はたくさんあります。 そして、それらの領域の1つはSVGの背景です。 あなたもそれらを見たことがあります。 波状の模様や曲線など。 このサイトを使用して、簡単にアクセスできるSVG背景を生成してください！
- SVG Grabber —このChrome拡張機能は、さまざまなWebサイトページからSVG画像を取得するための絶対的な天の恵みです。 アイコンをクリックするだけで、拡張機能はページ上のすべてのSVGファイルをフェッチできます。 もちろん、可能な限り著作権規則に従う必要がありますが、全体として、これは頻繁に使用するための堅実な拡張機能のように感じます。
- ベクターロゴゾーン—作業しているニッチによっては、世界をリードするブランドのベクターベースのロゴのコレクションがあると便利な場合があります。 これらのファイルは、特定の発表やプロモーションを行うときにも使用できます。 そして最近のほとんどの写真編集者はSVGファイルをPNGに変換することができます。
そして、それは私たちが実際にそこにあるものの表面に触れていることです。 個人的には、SVGは、私がWebサイトのデザインを操作する方法、さらには注目の画像を作成する方法に大きな違いをもたらしました。 SVGを使用すると、カラースペクトル、形状のさまざまな配置などを実際に調べることができます。
もちろん、実際の美しい写真を使用するのと同じではありませんが、どのWebサイトでも、JPGをベクターグラフィックに置き換えることができる場所をたくさん見つけることができます。 そして、それがまさにこの投稿の目標であり、WordPressでSVGを使用する方法の概要を説明します。
私たちがその目標を達成したかどうかにかかわらず、私たちはあなたにその判断をさせます。 この投稿に追加したいことがある場合、または共有する追加のリソースがある場合は、コメントセクションが常に開いていることを知っておいてください。