スケーラブルなベクトルの良さのように – Codepen

私はここでSVGの問題を行うつもりです。なぜなら、そのテクノロジーは永続的に興味深いと思うからです。それは、それがどのように機能するかを知っており、興味深い効果を引き出すために必要なときにそれを活用できるフロントエンド開発者にとっては少し超大国です。たとえば、これ 魅力的な線描画スクロール効果 SVG機能を搭載しています。

私が最近見たばかりのいくつかの本当にクールなSVGツールと、SVGテクニックについての素晴らしい文章がいくつかありました。 SVGは、基準の観点からかなり休眠しているにもかかわらず、SVGがまだ積極的に探索されているのを見るために私の小さな心を温めます。

いくつかのツールとリソースから始めましょう。それらは消化しやすいので、あなたが本当にそれらの1つを愛しているなら、あなたはすべてのようになるからです Codepen Sparkに感謝します、あなたは良いニュースレターです そして、それが私たちがその中にいることを知っています。

技術アイコン

SVGアイコンはトレンドとして単一カラーになる傾向がありますが、実際のロゴはブランドカラーを含む傾向があり、しばしばマルチカラーになる可能性があります。私はそれが非常に使いやすい方法で、ダウンロードとクイックコピーアンドパストの両方を提供するのが好きです。

durves

説明することはできませんが、時々、手を振っているドットのグリッドのSVGが必要です。これにより、そのすべての側面を制御できます。いくつかあります 涙の布 雰囲気。

svghub

波状、落書き、形など…他のもの。

彼らはそのようなものだから、私はこれが大好きです もの これはベクターアートに最適ですが、通常、アイコンセットのようなものでは見つかりません。ワンクリックして、クリップボードまたはダウンロードに右コピーします。

svgmix

大きなもの！ 193アイコン コレクション。私はそれらがコレクションにグループ化されているのが好きなので、たくさんの資産が必要な場合に備えて、それらが審美的に一緒に行く可能性があります。私は大きいです 名詞プロジェクト ガイですが、コレクションにはあまり整理されていないことがわかります。

わかりました、私たちはいくつかのテクニックと説明に進んだほうがいいと思います。

SVGグラデーション：湾曲した課題の解決

SVGアートワークのパスに従うために、どのようにしてカラーグラデーションを取得しますか？マイケル・シドニー・ムーアは、アートを小さなセクションに分割し、各セクションにグラデーションを適用することでそれを解決しました。

これは興味深いコントラストです Ksenia Kondrashovaが説明する別のテクニックに。

SVG ViewBox

viewBox SVGでは非常にシンプルです。他のすべてが描画される可視座標系をセットアップします。興味深いことに、いつでも変更することができ、特にアニメーション化する場合は、カメラとして効果的に機能します。

ブラッド・ウッズにはおそらく最良の説明があります インタラクティブな投稿を介して見たことがあります。

ノイズの多いSVGを作成します

結局のところ SVGでノイズ効果を発揮する仕事に任されていますが、それを良くするためにもう少しそれがあります、 ダニエル・インプケが書いているように：

ノイズを作成するために、私は使用しました 人工テクスチャを生成するための明示的なフィルターですが、私の好みに到達するためにかなりのいわだが必要でした。次に、他のフィルター効果を使用して色の分散を排除し、選択した充填色と自然にブレンドし、最後にフィルターを円に適用する必要がありました。

ノイズは、ベクターアートの数学的な鋭さを冷やすのに最適な方法のように感じることがあります。

また – あなたは知っていましたか CSSグラデーションでノイズをする奇妙なトリックがありますか？

レスポンシブSVG

この投稿には、Nilsバインダーからのテクニックがあります 彼は他の場所でさまざまなコンテンツに従ってSVGの一部を伸ばしており、私はそれが大好きです。

応答性といえば… イーサンの元の記事のイラストはそれ自体が反応していたことをご存知ですか？

SVGロードスピナーの作成：インタラクティブガイド

これは、SVGが私にとって非常に魅力的なものの一部です。シンプルなプリミティブで、すべてが組み合わさってエレガントなことを行います。ここで、特定の種類の楽しいスピナーを作るために、 セバスチャン・ノエル 用途

1. で stroke
2. stroke-dasharray ストロークをどのように破壊するかを正確に制御するため
3. stroke-linecap 破壊された部分の見栄えを制御するため
4. stroke-dashoffet ダッシュの位置を制御します
5. @keyframe アニメーションのアニメーション stroke-dasharray スピナーのように感じさせます。

アイコンの超越：フォントを補完するアイコンをカスタマイズします

これは「あなたのクライアントがたくさんのお金を持っていることを願っています」ファイルからです。私はそのアイデアが大好きですが、そうです 野生。 アイデアは、SVGアイコンが交換して、それらが隣にあるフォントの雰囲気に合わせることができるということです。

しかし、「スワップアウト」によって、実際には、どういうわけか、それは同じソースアイコンです。

これらのアイコンは視覚的には非常に異なって見えますが、上記の単一のソースアイコンを参照として使用して実際に作成されました。ここの各フォントについて、そのソースアイコンを変更したため、各フォントのスタイルとムードに合ったカスタムアイコンを作成します。