Есть ли способ конвертировать SVG файлы в HTML5-совместимые команды?

Название возобновляет все.: P

Ответ 1

Нет решения 100%, но есть script библиотеки, которые могут преобразовать подмножество svg в холст, например http://code.google.com/p/canvas-svg/, Там также экспериментальный Path2D API, который может нарисовать строку данных пути SVG на холст, но не уверен, насколько хорошо он поддерживается в браузерах.

Ответ 2

canvg кажется лучшим решением. Это активный проект с января 2012 года.

canvas-svg не обновлялся с момента его публикации в июне 2009 года.

Ответ 3

Я рекомендую проект Java SVGToCanvas, если вы просто хотите статически генерировать какой-нибудь Canvas javascript из файла SVG.

Ответ 4

Текущая версия Inkscape поддерживает "сохранить как: холст HTML5".

https://inkscape.org/en/

Он создает такой код:

<!DOCTYPE html>
<html>
<head>
    <title>Inkscape Output</title>
</head>
<body>
    <canvas id='canvas' width='200' height='200'></canvas>
    <script>
    var ctx = document.getElementById("canvas").getContext("2d");

// #layer1

// #rect3336
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.lineCap = 'butt';
    ctx.lineWidth = 1.000000;
    ctx.fillStyle = 'rgb(30, 144, 255)';
    ctx.rect(0.000000, 88, 64.000000, 64.000000);
    ctx.fill();

// #path4138
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(255, 255, 255)';
    ctx.lineWidth = 1.494353;
    ctx.arc(32.000000, 120, 29.252823, 0.000000, 6.28318531, 1);
    ctx.stroke();

    </script>
</body>

Ответ 5

попробуйте следующее:

http://www.professorcloud.com/svg-to-canvas/

Ответ 6

Здесь моя попытка!

http://appsynergy.net/projects/converting-svg-path-to-html5-canvas/

Ответ 7

Если вы хотите манипулировать объектами после преобразования, я рекомендую http://www.kineticjs.com/, он поддерживает также формат данных SVG-маршрута. Например: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/.

Очень легко перебирать svg и изменять прямоугольники, пути, строки и т.д. для сопоставления объектов kineticJS (canvas).

Ответ 8

Было такое же требование для нескольких внутренних проектов. Думал, что это может помочь другим, поэтому он доступен как эксперимент SVG2Canvas.

Ответ 9

Нет. SVG является (главным образом) статическим векторным форматом, а холст - API для динамического растрового изображения. Поворот SVG в холст делает столько же смысла, как поворот SVG в MathML: none.