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
820
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
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
130
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
800
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
340
楽しく向き合う例外対応
okutsu
0
760
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
390
【AI 自走型】Figma からデザインコーディングを行うプロンプト
tetsuro_b
0
110
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
280
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
160
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
840
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
1.2k
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
190
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Language of Interfaces
destraynor
156
24k
Thoughts on Productivity
jonyablonski
69
4.5k
Fireside Chat
paigeccino
35
3.2k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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が最大の原 因ではないかもしれないことを心に留めておいてください。
ありがとうございました