Breaking Up with SVG-in-JS

自己紹介大学法政大学経済学部　4年趣味サウナ、キーボード

はじめに kurtextremさんのBreaking Up with SVG-in-JS in 2023 という記事の内容を参考にさせていただきました https://kurtextrem.de/posts/svg-in-js

Background

これまでのSVG-in-JSの扱い方

<svg viewBox="0 0 300 300"> <g><path d="M0
200 v-200 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0z" /></g> </svg> import React from 'react'; import Icon from "./Icon.svg"; const Test = () => { return <Icon /> }

import * as React from "react" const Svg = (props)
=> ( <svg viewBox="0 0 300 300" width="1em" height="1em" {...props}> <path d="M0 200V0h200a100 100 90 0 1 0 200 100 100 90 0 1-200 0z" /> </svg> ) export default Svg import React from 'react'; import Svg from ".svg"; const Test = () => { return <Svg fill="red" width={20} height={20} /> } SVGR

なぜ SVG-in-JS はアンチパターンなのか

SVG要素は、Javascriptコードの一部として存在することがあるバンドルサイズが大きくなるほど、Javascriptがパースとコンパイルにかけるコストが大きくなる。大量のSVG要素が読み込まれる場合、パフォーマンスに影響パース＆コンパイル

SVG-in-JS SVG-in-HTML SVGがReactコンポーネントとして存在するため、 Reactのレンダリングプロセスに含まれる SVGは直接HTMLに含まれるため、 Reactのレンダリングプロセスに含まないレンダリング

JS bundle から SVGs を取り除くベストプラクティス

<svg viewBox="0 0 300 300"> <g><path d="M0
200 v-200 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0z" /></g> </svg> import React from 'react'; import Icon from "./Icon.svg"; const Test = () => { return <img src={Icon} /> } Using <img> to load the SVG

パフォーマンス vs ユーザーエクスペリエンス imgタグを使用する方法 • ページが最初にダウンロードされたときに、アイコンのレンダリングで、ちらつきが生じる • CSSを使ってスタイルを設定できない

SVG sprites – using <use> <svg style="display: none;"> <symbol id="icon-heart"
viewBox="0 0 32 32"> <title>heart icon</title> <path d="M16 29.414l-13.413-13.415 6.826-6.826 6.587 6.587 6.587-6.587 6.8266.826z"></path> </symbol> </svg> <svg class="icon icon-heart"><use href="#icon-heart"></use></svg> <svg class="icon icon-heart"><use href="#icon-heart"></use></svg>

SVG sprites – using <use> メモリ使用量の削減： SVGスプライトと<use>要素を使用すると、一つのSVGイメージを定義し、その定義を再利用して同じイメージを複数の場所で表示することができる。　　メモリ使用量が削減される。

SVG sprites – using <use> JavaScriptバンドルのサイズ削減： SVGスプライトを使用すると、SVGイメージは JavaScriptバンドルの一部ではなく、独立したSVGファイルとして存在する。　　　JavaScriptバンドルのサイズが削減される。

SVG sprites – using <use> レンダリングパフォーマンスの向上： JavaScriptエンジンではなくブラウザのHTMLパーサーとSVGレンダリングエンジンによってパースとレンダリングが行われる。これはJavaScriptエンジンによるパースとレンダリングよりも効率
的で、レンダリングパフォーマンスが向上する。

　環境にもよりますが、、 SVG sprites – using <use> を使うのが良さそう

まとめ SVG-in-JSは、パフォーマンスとメモリ使用量の観点から見るとアンチパターンである。 SVG-in-HTMLは、Javascriptバンドルサイズを小さくするための最善の方法。ただし、最適化すべきもっと重要なことがあるかもしれません。SVG最適化の前に、SVG-in-JSが最大の原因ではないかもしれないことを心に留めておいてください。

ありがとうございました

Breaking Up with SVG-in-JS

Breaking Up with SVG-in-JS

wakamaki

Other Decks in Programming

Featured

Transcript