あなたはこれらのSVG技術について知っていますか?

私は最近3エキサイティングな発見SVG 技法

変換SVG 似合うcanvas

HiDPI Canvas

prefetching SVG : verrrrrryyyy cool

私は、彼らについてあなたに話すのを待つことができません!

背景物語

だから私はFaviator 数ヵ月後、私はいくつかの本当に良いフィードバックを受けている.あなたがすでにそうしなかったならば、それをチェックして、それを主演させてください.
Faviator 図書館に頼ったconvert-svg これは基本的にSVGのスクリーンショットを取る.ライブラリは、その直感的なAPIとそれが使用している事実のために選ばれましたpuppeteer , イメージ出力がChromeで見るものと全く同じに見えることを保証します.
しかし、このライブラリには2つの主要な問題があります.

画質は優れていないぼやけた画像が生成される

CSS@import() or url() スクリーンショットが撮影されるとき、常にロードされない

Don't get me wrong. convert-svg is still an amazing project!

番目の問題は非常に重要ですFaviator フォントファイルを取得するGoogle Fonts . 私はそれを修正する方法を見つけましたPR , しかし、オーナーは忙しすぎて、プロジェクトに時間を費やすことができない.
だから私は自分自身を作成することを決めた:@ycm.jason/svg-to-img ; これらの問題を解決することを目指してこれに取り組んでいる間、私はSVGと共に使用されるいくつかの本当にクールなテクニックを発見したので、私は私が私の発見についてブログポストを作ることができたと思いました.

SVGをキャンバスに変換する

私が言及したように、変換する一つの方法SVG 画像をスクリーンショットを行うことでpuppeteer . これは実際にはかなり良いアプローチは、我々はレンダリング中に発生する可能性のあるエラーを心配する必要はありませんSVG .
もう一つの方法はHTML 5canvas . 私たちは<img> でcanvas 簡単にdrawImage メソッド.コンボとしてcanvas また、toDataURL 描画をPNGまたはJPEG形式にエクスポートするメソッドです.
わかりました何?
つまり、

ポイント<img> SVGに

描画する<img> で<canvas>

エクスポート<canvas> PNGまたはJPEGとして

以下に簡単なデモを行います.

const img = document.createElement('img');
img.src = 'some/path/to/the/awesome.svg';
img.onload = () => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  // draw img to (0, 0) on the canvas
  context.drawImage(img, 0, 0);
  // export the PNG or JPEG
  const pngDataURL = canvas.toDataURL('image/png');
  const jpegDataURL = canvas.toDataURL('image/jpeg');
  // ... do something with them ...
};

このすべてがブラウザで発生します@ycm.jason/svg-to-img ブラウザとノードの両方をサポートします.ジェイエスpuppeteer ).

ヒッピーキャンバス

Hidpiキャンバスはポールルイスによって導入されたテクニックです.これは、高DPIデバイスと図面の問題に対処するcanvas . どうぞご覧下さいarticle 詳しくは.
概要

キャンバス描画は、幅と高さを保つために、高DPI装置の2 xピクセルで描かれます

これは基本的にぼやけたイメージにつながるイメージをアップスケーリングすることです

これを解決するために、意図したサイズのキャンバス2 xを描画し、目的のサイズに戻すためにCSSを使用することができます.

クイック例( 200 x 500を描画しようとする)

<canvas width="400" height="1000" style="width: 200; height: 500">
</canvas>

このテクニックは、私がSVG 高DPIスクリーン上の鮮明な画像へしかし、それはイメージの若干の手動のサイズ変更を必要とします.現在の実装jimp しかし、私はこの目的のためにより小さいものを書くつもりです.(今から私は全体のフリークを含むjimp バンドル内.これは罪深い……)
あなたは、彼らが異なる方法を見ることができます:
オリジナルSVG

https://svgshare.com/i/7Sp.svg
(画像表示はSVGではない.
hidpiテクニックなしで

Hadpi技術で

違いが見えますか.あなたは“f”のヒントに焦点を当てる場合は、最後の1つは、元のSVGに一致する方法に気づくでしょう.
これは間違いなくイメージの詳細を改善しますが、それはまだ少しビットぼやけて表示されます.これは、画像のサイズ変更に起因する可能性があります.私は、画像処理の専門家ではありません.私がここで使用できるいくつかの有用なテクニックを教えてくれたら良いでしょう.

プリフェッチSVG

CSSはスタイルを制御するためにSVGに埋め込むことができます.CSS 3の導入で@import , CSS定義の中にCSSを含めることができました.どのように驚くべき!
しかし、あなたがあなたのSVG<img> , スタイルがインポートされていないことがわかります.SVGが使用されている場合、ブラウザは<img> .
私は、上記の問題を解決し、あなたのSVGをオフラインでも同じように見えるプリフェッチSVGと呼ばれるテクニックを発明しました!
考え方は代わる@import インポートしている内容で.置換するurl() データURLを指定します.これを行うライブラリを作りました.prefetch-svg .
先取りなしで

Since you might have the font-family installed locally, I explicitly removed the @import to demonstrate.

prefetchingする

それで

そしてそれです.SVGSについての私の小さな共有は、ここにあります.あなたが何を考えるかについて、私に話してください!何か見逃した?