概要
remでサイズ指定されたSVGを利用すると、Safariのコンソールにて下記のエラー内容が表示される。
（ChromeやFirefoxでは表示されない）
[Error] Error: Invalid value for <svg> attribute width="1.2rem" (svg.html, line 8)
[Error] Error: Invalid value for <svg> attribute height="1.2rem" (svg.html, line 8)
参考資料
問題
下記内容のHTMLファイルをSafariで開くと上記エラー内容がコンソールに表示される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>svg.html</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24">
<path fill="black"
d="M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4zm1 5q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
</svg>
</body>
</html>
解決策
下記コードは、上記コードを抜粋したもの。
widthとheightに注目。
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24">
上記コードはwidth属性とheight属性を使ってサイズを設定しているが、
下記コードのようにCSSを使って設定すると上記エラーは発生しない。
<svg xmlns="http://www.w3.org/2000/svg" style="widht: 1.2rem; height: 1.2rem" viewBox="0 0 24 24">