ノイズの多いSVG制作

 (daniel.do)
4 ポイント 投稿者 GN⁺ 2023-12-08 | 2件のコメント | WhatsAppで共有

SVGにノイズ効果を追加する

  • Web技術の発展がWebデザインにどのような影響を与えるかへの関心
  • ディスプレイのピクセル密度向上が、写真からベクターイラストレーションへの移行を促進
  • 最近のデザイントレンドでは、質感のある影や照明効果に用いるノイズテクスチャが登場

Studio Vellekoop & León

  • ノイズテクスチャスタイルに対する個人的な好みと、それをSVGで再現する難しさ
  • SVGへの興味と、さまざまな効果を出す方法の探求
  • SVG最適化ツールであるSVGOの登場と、SVGを直接書いた経験の共有

基本図形とグラデーション

  • SVGでは円や四角形のような基本図形を簡単に描ける
  • グラデーション適用時、コンポーネント再利用のためにベースカラーに応じて変化するグラデーションが必要
  • マスクの使い方と、<defs>を使って図形を一度だけ定義し、use要素で参照する方法を紹介

結果

  • <feTurbulence>フィルターを使って人工的なノイズテクスチャを生成
  • 色の変化を取り除き、選択した塗りつぶし色と自然に混ざるようにするフィルター効果を適用
  • 最終的に満足のいくイラストレーションを作成したが、Safariでは異なるレンダリングになる

追加情報 2023年12月7日

  • Hacker Newsに記事を投稿し、いくつか反応を得た
  • 2021年にJimmy Chionが執筆した、類似テーマのCSS Tricks記事を紹介
  • この記事を書いた当時は以前の記事を認識していなかったが、現在は補足資料としてリンクしている

GN⁺の意見

この記事で最も重要なのは、Webデザインの最新トレンドの一つであるノイズテクスチャをSVGで実装する方法を探っている点だ。この内容はWebデザイナーや開発者にとって興味深いテーマであるだけでなく、最新のWebデザイン技術を学びたい初級ソフトウェアエンジニアにも有益な情報を提供している。SVGを使ったデザインの柔軟性と最適化方法についての実用的な例を通じて、読者は複雑なデザイン効果を効率よく実装する方法を学べる。

関連記事

2件のコメント

 
ndrgrd 2023-12-09

やはり期待を裏切らないSafari！ 2020年代のIEという名前がもったいないくらいですね
 
GN⁺ 2023-12-08
Hacker Newsのコメント

  • SVGを使って、canvasでは実現できなかったシャドウ効果を実装しようとしたが、SafariではCSSのシャドウが動作しないため、SVGネイティブのフィルターを使わなければならなかった。他のブラウザーと見え方が異なるため、Safariを検出してCSS版を無効化するJavaScriptを使っている。

  • 「再帰的な陰陽」の背景はそのブログで説明されており、テクスチャーをいろいろ試してみる予定だが、Safariで違って見えることにフラストレーションを感じる。SVGの解釈が標準化されるのか気になる。

  • SVGで特定のイラストレーションスタイルを再現するのは簡単ではなく、もどかしさを感じる。このスタイルは「dithering」と呼ばれ、CSS-Tricksの「Grainy Gradients」ページで同じ技法が説明されている。CSSを使って画像全体に適用する代替手段もある。

  • SVGで複雑なカンファレンスポスターを作ったことがあるが、ブラウザーやプログラムごとにレンダリング結果が異なる。SVGはインクルード/リンクして埋め込めるが、別のSVGを含めると動作しない。ブラウザーが「セキュリティ」上の問題で、埋め込み/リンクされた画像を表示しないことがある。複雑なSVGをPDFに変換すると、一貫性なくメモリー不足の問題が起きる。SVGをPDFに変換する各ツールで結果が異なる。Inkscapeのようなツールは、埋め込まれたSVGをラスターグラフィックとして扱うことがある。

  • フィルム写真家たちはフィルムの粒状感をなくそうと苦労してきたが、デジタル写真家たちはそれを再び加えようとする傾向がある。デジタルのクリーンさの中で、こうした例は魅力的に感じられる。

  • Inkscapeはさまざまなフィルター効果でこの種のノイズを追加でき、Plain SVGとして書き出せば、コード内でfeTurbulenceの使用を確認できる。また、Affinity Designer 2がノイズをどう処理するかも比較している。書き出されたSVGには、base64 jpeg画像としてノイズが含まれている。

  • 「ApeFest」のWebサイトは、CSSアニメーション（実際にはJSで移動）を使い、「ランダムに」動くタイル状のPNGオーバーレイで動的なノイズを生成している。技術的には単純だが効果的だ。

  • SVGフィルターの見た目はエンジンやスケーリング要素によって大きく変わるため、微妙な部分でのみ使い、精密さが重要でない場合にしか使わない。feDisplacementMapのようなフィルターはアンチエイリアシングを壊してしまい、使いたい場面の半分を台無しにする。

  • ページ背景として使わないことを勧める。以前試したとき、さまざまなデバイスで奇妙なバグが発生し、大規模サイトではページが完全に停止したり、SVGが一定サイズ以上でレンダリングをやめたりした。

  • Perlin Noiseとその派生であるFractal Noiseは、リアリティを加えたり「有機的」な感じを出したりするのに非常に効果的だ。たとえば、『アラジン（1992）』の洞窟脱出シーンで効果的に使われている。

  • ズームレベルに依存しない形で効果を作る方法に関心がある。また、ランダム性の追加に関連して、与えられたサイズで1つの正しいレンダリング結果を定義できるようなシード（seed）を設定する方法があるのか気になっている。