$30 off During Our Annual Pro Sale. View Details »

Breaking Up with SVG-in-JS

Breaking Up with SVG-in-JS

HRBrain Fly High #4 -Frontend-にて使用した資料

wakamaki

July 28, 2023
Tweet

Other Decks in Programming

Transcript

  1. Breaking Up with
    SVG-in-JS

    View Slide

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

    View Slide

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

    View Slide

  4. Background

    View Slide

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

    View Slide





  6. import React from 'react';
    import Icon from "./Icon.svg";
    const Test = () => {
    return
    }

    View Slide

  7. import * as React from "react"
    const Svg = (props) => (



    )
    export default Svg
    import React from 'react';
    import Svg from ".svg";
    const Test = () => {
    return
    }
    SVGR

    View Slide

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

    View Slide

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

    View Slide

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

    レンダリング

    View Slide

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

    View Slide





  12. import React from 'react';
    import Icon from "./Icon.svg";
    const Test = () => {
    return
    }
    Using to load the SVG

    View Slide

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

    View Slide

  14. SVG sprites – using


    heart icon





    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. ありがとうございました

    View Slide