複数imgタグの".svg"を".png"に書き換えるJavaScript

Opera Mini ではsvgファイルの日本語が文字化けした

サイト制作でベクター画像を多用しています。
最近のブラウザの多くで対応されているようなので、趣味のサイトであれば問題ないだろうと。

ただ、svgで作ったイラスト内に日本語を入れたところ、Opera Miniで文字化け。
その対処法として、Opera Miniで読み込まれた場合にはsvgファイルではなく、pngファイルを読み込むようなJavaScriptを書いてみました。

なるべくコード量は減らしたいので、各imgタグ内の".svg"の部分だけを".png"に書き換えるコードにしたいと思います。

".svg"を".png"に書き換えるための流れとコード

以下の流れにそって作成しました。

• 書き換えたいimgタグにクラスsvgを付加
• svgクラスを持つ要素をすべて取得
• 各要素ごとに".svg"を".png"に書き換え
• userAgentを設定して、Opera Mini(Presto)で開いた場合に書き換え

Presto.html

<!--関係ないコードは省略 -->

<img class="svg" src="images/sample1.svg">
<img class="svg" src="images/sample2.svg">

<!--関係ないコードは省略 -->

<script type="text/javascript">
    if (navigator.userAgent.indexOf("Presto") != -1) {
        var svg = document.getElementsByClassName("svg");
        for(var i=svg.length;i--;){
            svg[i].src = svg[i].src.replace(".svg",".png");
        };
    }
</script>

これで無事、Opera Miniではpngファイルが読み込まれるようになりました。

追記

if文の条件式をより簡略化できます。

window.operaminiだけで判定できてしまうのですね。
Opera miniのサイトにも掲載されている内容です。ぜひ御覧ください。
https://dev.opera.com/articles/opera-mini-and-javascript/#detectingmini

@chitoku さん、アドバイスありがとうございました。
コード内容は以下のとおりです。

presto2.html

<!--関係ないコードは省略 -->

<img class="svg" src="images/sample1.svg">
<img class="svg" src="images/sample2.svg">

<!--関係ないコードは省略 -->

<script type="text/javascript">
    if (window.operamini) {
        var svg = document.getElementsByClassName("svg");
        for(var i=svg.length;i--;){
            svg[i].src = svg[i].src.replace(".svg",".png");
        };
    }
</script>