Растрировать динамически сгенерированный SVG

Question

Я пытаюсь преобразовать SVG-граф, который я сгенерировал, в печатное изображение. Из моих исследований я предположил, что мне нужно как-то сделать холст из SVG, а затем сделать из этого изображение. Тем не менее, каждый пример, который я нашел, использует тег изображения внутри svg, или это какой-то статический файл, который не изменяется. Вот один из сгенерированных графиков, которые я пытаюсь распечатать.

<svg width="603" height="250"> 
    <g> 
    <path d="M0,250Q9.380000000000003,235.10638297872342,20.1,234.04255319148936C36.18,232.4468085106383,134.67000000000002,257.4468085106383,160.8,234.04255319148936S267.33,7.978723404255318,281.4,0S297.48,131.38297872340425,301.5,154.25531914893617S307.53000000000003,221.80851063829786,321.6,228.72340425531914S428.13000000000005,227.12765957446808,442.20000000000005,223.40425531914894S450.24,190.95744680851064,462.3,191.48936170212767S550.74,223.40425531914892,562.8,228.72340425531914S578.88,242.5531914893617,582.9,244.68085106382978Q585.5799999999999,246.09929078014184,603,250L603,250Q585.5799999999999,250,582.9,250C578.88,250,574.8599999999999,250,562.8,250S474.36,250,462.3,250S456.27000000000004,250,442.20000000000005,250S335.67,250,321.6,250S305.52,250,301.5,250S295.46999999999997,250,281.4,250S186.93,250,160.8,250S36.18,250,20.1,250Q9.380000000000003,250,0,250Z" class="area" fill="rgba(55,173,223,0.25)"></path> 
    </g> 

    <g class="y_grid"> 
    <g style="opacity: 1;" transform="translate(0,250)"> 
     <line class="tick" x2="603" y2="0"></line> 
     <text x="-3" y="0" dy=".32em" text-anchor="end">0</text> 
    </g> 
    <g style="opacity: 1;" transform="translate(0,143.61702127659575)"> 
     <line class="tick" x2="603" y2="0"></line> 
     <text x="-3" y="0" dy=".32em" text-anchor="end">20</text> 
    </g> 
    <g style="opacity: 1;" transform="translate(0,37.2340425531915)"> 
     <line class="tick" x2="603" y2="0"></line> 
     <text x="-3" y="0" dy=".32em" text-anchor="end">40</text> 
    </g> 
    <path class="domain" d="M603,0H0V250H603"></path> 
    </g> 

    <g class="x_grid_d3"> 
    <g style="opacity: 1;" transform="translate(0.37222222222222223,0)"> 
     <line class="tick" x2="0" y2="250"></line> 
     <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 15</text> 
    </g> 
    <g style="opacity: 1;" transform="translate(116.69166666666668,0)"> 
     <line class="tick" x2="0" y2="250"></line> 
     <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 20</text> 
    </g> 
    <g style="opacity: 1;" transform="translate(233.0111111111111,0)"> 
     <line class="tick" x2="0" y2="250"></line> 
     <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 26</text> 
    </g> 
    <g style="opacity: 1;" transform="translate(349.3305555555556,0)"> 
     <line class="tick" x2="0" y2="250"></line> 
     <text x="0" y="253" dy=".71em" text-anchor="middle">May 02</text> 
    </g> 
    <g style="opacity: 1;" transform="translate(465.65000000000003,0)"> 
     <line class="tick" x2="0" y2="250"></line> 
     <text x="0" y="253" dy=".71em" text-anchor="middle">May 08</text> 
    </g> 
    <g style="opacity: 1;" transform="translate(581.9694444444444,0)"> 
     <line class="tick" x2="0" y2="250"></line> 
     <text x="0" y="253" dy=".71em" text-anchor="middle">May 13</text> 
    </g> 
    <path class="domain" d="M0,250V0H603V250"></path> 
    </g> 
</svg> 

Можно ли как-то напечатать эту штуку? Кроме того, мне нужно сделать это на всех клиентах, без помощи сервера, если это возможно.

Кроме того, я пробовал использовать canvg, но все, что я получаю, это черный ящик. Вот что бит кода:

svg = $('.full-graph').html() 
canvg 'canvas', svg, renderCallback: -> 
    image = document.getElementById('canvas').toDataURL 'image/png' 
    window.open image 

Answer 1

В зависимости от браузера (http://caniuse.com/#feat=svg) вы можете загрузить svg в отдельном окне/вкладке или использовать его как src тега img. В любом случае браузер должен печатать его, как и любое другое изображение.

Обязательно укажите версию и другие обязательные атрибуты в теге svg.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" 
    xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" width="640px" height="640px"> 

Если вы генерация SVG на клиенте, вы можете попробовать кодирование его в качестве URL данных (http://caniuse.com/#feat=datauri) и используя URL данных в качестве IMG SRC или анкерной HREF.

Answer 2

Вы можете использовать Apache батик для CONVER в SVG в формате JPG/PNG.