Breaking Up with SVG-in-JS
by
wakamaki
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Breaking Up with SVG-in-JS
Slide 2
Slide 2 text
自己紹介 大学 法政大学経済学部 4年 趣味 サウナ、キーボード
Slide 3
Slide 3 text
はじめに kurtextremさんのBreaking Up with SVG-in-JS in 2023 という記事の内容を参考にさせていただきました https://kurtextrem.de/posts/svg-in-js
Slide 4
Slide 4 text
Background
Slide 5
Slide 5 text
これまでのSVG-in-JSの扱い方
Slide 6
Slide 6 text
import React from 'react'; import Icon from "./Icon.svg"; const Test = () => { return }
Slide 7
Slide 7 text
import * as React from "react" const Svg = (props) => ( ) export default Svg import React from 'react'; import Svg from ".svg"; const Test = () => { return } SVGR
Slide 8
Slide 8 text
なぜ SVG-in-JS はアンチパターンなのか
Slide 9
Slide 9 text
SVG要素は、Javascriptコードの一部として存在することがある バンドルサイズが大きくなるほど、Javascriptが パースとコンパイルにかけるコストが大きくなる。 大量のSVG要素が読み込まれる場合、パフォーマンスに影響 パース＆コンパイル
Slide 10
Slide 10 text
SVG-in-JS SVG-in-HTML SVGがReactコンポーネントとして 存在するため、 Reactのレンダリングプロセスに 含まれる SVGは直接HTMLに含まれるため、 Reactのレンダリングプロセスに含まな い レンダリング
Slide 11
Slide 11 text
JS bundle から SVGs を取り除くベストプラクティス
Slide 12
Slide 12 text
import React from 'react'; import Icon from "./Icon.svg"; const Test = () => { return
} Using
to load the SVG
Slide 13
Slide 13 text
パフォーマンス vs ユーザーエクスペリエンス imgタグを使用する方法 ● ページが最初にダウンロードされたときに、 アイコンのレンダリングで、ちらつきが生じる ● CSSを使ってスタイルを設定できない
Slide 14
Slide 14 text
SVG sprites – using heart icon
Slide 15
Slide 15 text
SVG sprites – using メモリ使用量の削減： SVGスプライトと要素を使用すると、 一つのSVGイメージを定義し、その定義を再利用して 同じイメージを複数の場所で表示することができる。 メモリ使用量が削減される。
Slide 16
Slide 16 text
SVG sprites – using JavaScriptバンドルのサイズ削減： SVGスプライトを使用すると、SVGイメージは JavaScriptバンドルの一部ではなく、 独立したSVGファイルとして存在する。 JavaScriptバンドルのサイズが削減される。
Slide 17
Slide 17 text
SVG sprites – using レンダリングパフォーマンスの向上： JavaScriptエンジンではなく ブラウザのHTMLパーサーとSVGレンダリングエンジン によってパースとレンダリングが行われる。 これはJavaScriptエンジンによるパースとレンダリングよりも効率 的で、レンダリングパフォーマンスが向上する。
Slide 18
Slide 18 text
環境にもよりますが、、 SVG sprites – using を使うのが良さそう
Slide 19
Slide 19 text
まとめ SVG-in-JSは、パフォーマンスとメモリ使用量の観点から見るとアンチパターンである。 SVG-in-HTMLは、Javascriptバンドルサイズを小さくするための最善の方法。 ただし、 最適化すべきもっと重要なことがあるかもしれません。SVG最適化の前に、SVG-in-JSが最大の原 因ではないかもしれないことを心に留めておいてください。
Slide 20
Slide 20 text
ありがとうございました
}
Using