Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Breaking Up with SVG-in-JS
Search
wakamaki
July 28, 2023
Programming
1
890
Breaking Up with SVG-in-JS
HRBrain Fly High #4 -Frontend-にて使用した資料
wakamaki
July 28, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
1
620
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
340
NPOでのDevinの活用
codeforeveryone
0
900
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Site-Speed That Sticks
csswizardry
10
700
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
What's in a price? How to price your products and services
michaelherold
246
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Transcript
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の扱い方
<!-- Icon.svg --> <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 を取り除くベストプラクティス
<!-- Icon.svg --> <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が最大の原 因ではないかもしれないことを心に留めておいてください。
ありがとうございました