Запазете ‹svg› HTML5 в PNG или изображение

Имам диаграми, генерирани с D3 Javascript библиотека и трябва да ги запазя във файл PNG или SVG.

Има ли библиотека, която да върши работа?

Намерих това https://github.com/sampumon/SVG.toDataURL, но не работи на моя html5 във firefox конзола получих тази грешка:

NS_ERROR_NOT_AVAILABLE: Компонентът не е наличен [Interrompi per questo errore]

ctx.drawImage(img, 0, 0);


svg html export
person Salvatore Dibenedetto    schedule 31.01.2013    source източник
comment
Ето пример как да го направите с Chrome: bl.ocks.org/3831266   -  person methodofaction    schedule 31.01.2013
comment
Благодаря! това работи...но когато се опитам да отворя файла в illustrator, той ме моли да потвърдя файла. Имам това съобщение: този svg е невалиден. Валидирайте преди отваряне.   -  person Salvatore Dibenedetto    schedule 01.02.2013
comment
Намерете XML валидатор и се уверете, че е валиден XML. Ако всичко изглежда наред, публикувайте кода във вашия въпрос и аз мога да ви помогна да намерите грешката, която кара Illustrator да спъва.   -  person methodofaction    schedule 01.02.2013
comment
Също така се уверете, че сте включили XML пространството от имена в svg тага, като например... d3.select('svg').attr("xmlns", "http://www.w3.org/2000/svg");   -  person methodofaction    schedule 01.02.2013

Отговори (3)


arrow_upward
7
arrow_downward

Пример от developer.mozilla.org, демонстриращ как да експортирате svg към png с помощта на елемент canvas.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
             '<em>I</em> like ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
  var png_img = canvas.toDataURL("image/png");
}

img.src = url;
person Rafał R    schedule 09.12.2016
comment
не може да използва използване чрез избиране на елемент ‹svg› в инспектора - person brauliobo; 09.12.2019

arrow_upward
1
arrow_downward

Метод на скрипт от страна на сървъра

Ето прост метод за запазване на svg елементи в png (въпреки че използва скриптове от страна на сървъра, които може да са различни от това, което бихте очаквали): Плащане тази страница.

Както е документирано от автора, клиентът извлича svg елемента (използвайки XMLSerializer.serializeToString) и го изпраща на сървъра; сървърът го конвертира в png и го изпраща обратно на клиента. Сървърът може да използва всяка програма, която е удобна (rsvg-convert в този случай).

Canvg библиотека

Можете да използвате тази библиотека, за да направите това от страна на клиента (проверете!):

canvg е анализатор и изобразяване на SVG. Той взема URL към SVG файл или текста на SVG файл, анализира го в JavaScript и изобразява резултата върху елемент Canvas

Използвайте го така:

//load a svg snippet in the canvas with id = 'drawingArea'
canvg(document.getElementById('drawingArea'), '<svg>... </svg>')

След това можете да използвате метода toDataURL: document.getElementById('drawingArea').toDataURL('image/png');

person wzhd    schedule 09.03.2014

arrow_upward
0
arrow_downward

Това разширение работи с всички <svg> тагове в страницата: https://chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp?hl=en-GB

person brauliobo    schedule 09.12.2019