SVGをbitmapに変換

canvgだとuse xlink での要素コピーに非対応なので、

SVG2Bitmap を使う

cdnjsにないので、自分のサーバに置くこと。

画像サイズはSVGのviewBox属性でなく、表示そのままのstyleが採用される。

styleで拡大しても、SVGの座標がそのまま反映されズレた画像が生成される。

textarea

SVG

Canvas

PNG


  view source
  JavaScript
  var textarea = document.getElementById('textarea');
var svgArea = document.getElementById('svgArea');
var toPngButton = document.getElementById('toPngButton');
var toPngArea = document.getElementById('toPngArea');
var toCanvasArea = document.getElementById('toCanvasArea');

var svgToBitmap = function(){
  var svg = svgArea.querySelector('svg');
  SVG2Bitmap(svg, function(canvas, dataURL){
    toCanvasArea.innerHTML = '';
    toCanvasArea.appendChild(canvas);

    var img = document.createElement('img');
    img.src = dataURL;
    toPngArea.innerHTML = '';
    toPngArea.appendChild(img);
  });
}

svgToBitmap();





toPngButton.addEventListener('click', function(){
  svgToBitmap();
});


textarea.value = svgArea.innerHTML;
textarea.addEventListener('change', function(){
  svgArea.innerHTML = textarea.value;
});





tabIndent.config.tab = '  ';
tabIndent.render(textarea);

  CSS
  textarea{
  width:90%;
  height:200px;
}


svg{
  width:256px;
}

  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-svg/svg-to-bitmap/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。