Корректная работа с SVG

Chrome. Если нужно из консоли - можете этот скрипт попробовать: https://github.com/RazrFalcon/libresvg/tree/master/tests/svgrender

Ну или ждите пока я закончу эту либу =)

~~RazrFalcon~~ ★★★★★
(19.11.17 17:21:31 MSK)

Ответ на: комментарий от RazrFalcon 19.11.17 17:21:31 MSK

Спасибо. Попробую. А то подозрение, что Inkscape теряет слои.

Mirage1_ ★
(19.11.17 17:24:38 MSK) автор топика

Ответ на: комментарий от RazrFalcon 19.11.17 17:21:31 MSK

Кстати, вопрос. Чем принципиально отличается MPL-2.0 которую ты выбрал, от Apache-2.0?

Mirage1_ ★
(19.11.17 17:26:07 MSK) автор топика

Ответ на: комментарий от Mirage1_ 19.11.17 17:26:07 MSK

Без особых причин. Хотя у Apache не совместим с GPLv2.

~~RazrFalcon~~ ★★★★★
(19.11.17 17:33:05 MSK)

Ответ на: комментарий от RazrFalcon 19.11.17 17:33:05 MSK

Походу, нужен свежий node? Собираю под Debian 8.6, установил пакеты npm и nodejs-legacy:

$ npm i puppeteer
npm WARN engine puppeteer@0.13.0: wanted: {"node":">=6.4.0"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine agent-base@4.1.1: wanted: {"node":">= 4.0.0"} (current: {"node":"0.10.29","npm":"1.4.21"})
/
...
/git/libresvg-master/tools/rendersvg/node_modules/puppeteer/install.js:60
  const cleanupOldVersions = allRevisions.map(({platform, revision}) => Downlo
                                                        ^
SyntaxError: Unexpected token ,
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

Mirage1_ ★
(19.11.17 17:59:23 MSK) автор топика

Ответ на: комментарий от Mirage1_ 19.11.17 17:59:23 MSK

Хз. С нодой не знаком. У меня 8.9.1.

~~RazrFalcon~~ ★★★★★
(19.11.17 18:09:34 MSK)

Ответ на: комментарий от RazrFalcon 19.11.17 17:21:31 MSK

Раз пошла такая пьянка, загрузил свежий node.js.

Дебиан слишком стар для свежего node:

/git/node.js/node-v9.2.0$ ./configure --prefix=/usr/local
WARNING: C++ compiler too old, need g++ 4.9.4 or clang++ 3.4.2 (CXX=g++)

В Debian 8.6 по-дефолту g++ 4.9.2.

Однако, выручил clang-3.5.

$ export CXX=clang-3.5
$ ./configure --prefix=/usr/local
$ make -j5
...
/git/node.js/node-v9.2.0/out/Release/obj.host/icutools/deps/icu-small/source/i18n/reldtfmt.o: In function `icu_60::RelativeDateFormat::RelativeDateFormat(UDateFormatStyle, UDateFormatStyle, icu_60::Locale const&, UErrorCode&)':
../deps/icu-small/source/i18n/reldtfmt.cpp:(.text+0x2bc): undefined reference to `__dynamic_cast'
../deps/icu-small/source/i18n/reldtfmt.cpp:(.text+0x311): undefined reference to `__dynamic_cast'
../deps/icu-small/source/i18n/reldtfmt.cpp:(.text+0x365): undefined reference to `__dynamic_cast'
...
/git/node.js/node-v9.2.0/out/Release/obj.host/icutools/deps/icu-small/source/i18n/currpinf.o:(.rodata+0xd0): undefined reference to `vtable for __cxxabiv1::__si_class_type_info'
clang: error: linker command failed with exit code 1 (use -v to see invocation)
tools/icu/genrb.host.mk:138: ошибка выполнения рецепта для цели «/git/node.js/node-v9.2.0/out/Release/genrb»
make[1]: *** [/git/node.js/node-v9.2.0/out/Release/genrb] Ошибка 1
rm d5d7e121f507957bc54e8a98042a186db43a391f.intermediate
Makefile:81: ошибка выполнения рецепта для цели «node»
make: *** [node] Ошибка 2

Компиляция nodejs завершилась с ошибкой.

Mirage1_ ★
(19.11.17 18:37:27 MSK) автор топика

Ссылка

Ответ на: комментарий от RazrFalcon 19.11.17 18:09:34 MSK

У меня 8.9.1.

Думаешь, старый nodejs соберётся под моим Дебиан?

Для сборки 9.2.0 под Дебиан 8 придётся пересобирать g++, или ставить g++ из другой ветки. Clang не прокатывает.

Mirage1_ ★
(19.11.17 18:39:21 MSK) автор топика

Ответ на: комментарий от Mirage1_ 19.11.17 18:39:21 MSK

У меня gentoo latest, поэтому и проблем нет. Проще докер/виртуалку с убунутой запустить.

~~RazrFalcon~~ ★★★★★
(19.11.17 18:42:14 MSK)

Ответ на: комментарий от RazrFalcon 19.11.17 18:42:14 MSK

Я скачал node.js-v7, https://nodejs.org/download/release/v7.0.0/

Он успешно собирается компилятором g++-4.9 под восьмым дебом минут за 30-40 на бюджетном ноуте.

$ du -sh .
348M
# make install
...
installing /usr/local/include/node/openssl/opensslconf.h
installing /usr/local/include/node/zconf.h
installing /usr/local/include/node/zlib.h

$ npm i puppeteer
npm WARN engine puppeteer@0.13.0: wanted: {"node":">=6.4.0"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine agent-base@4.1.1: wanted: {"node":">= 4.0.0"} (current: {"node":"0.10.29","npm":"1.4.21"})
-
> puppeteer@0.13.0 install /git/libresvg-master/tools/rendersvg/node_modules/puppeteer
> node install.js

Downloading Chromium r515411 - 95.4 Mb [====================] 100% 0.0s 
Chromium downloaded to /git/libresvg-master/tools/rendersvg/node_modules/puppeteer/.local-chromium/linux-515411
puppeteer@0.13.0 node_modules/puppeteer
├── progress@2.0.0
├── proxy-from-env@1.0.0
├── mime@1.4.1
├── debug@2.6.9 (ms@2.0.0)
├── ws@3.3.1 (ultron@1.1.0, safe-buffer@5.1.1, async-limiter@1.0.0)
├── extract-zip@1.6.6 (mkdirp@0.5.0, yauzl@2.4.1, concat-stream@1.6.0)
├── https-proxy-agent@2.1.0 (agent-base@4.1.1)
└── rimraf@2.6.2 (glob@7.1.2)

/git/libresvg-master/tools/rendersvg$ ls -1
Cargo.toml
LICENSE.txt
node_modules/
README.md
src/

Запускаем:

/git/libresvg-master/tests/svgrender$ node svgrender.js sample.svg sample.png 512
/git/libresvg-master/tests/svgrender/svgrender.js:10
(async() => {
      ^
SyntaxError: Unexpected token (
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:545:28)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.runMain (module.js:607:10)
    at run (bootstrap_node.js:382:7)
    at startup (bootstrap_node.js:137:9)
    at bootstrap_node.js:497:3

Баг?

Mirage1_ ★
(19.11.17 19:37:42 MSK) автор топика

Ответ на: комментарий от RazrFalcon 19.11.17 17:21:31 MSK

Chrome

Если чистым хромом, имеются ввиду расширения (addons) под него? аддон SVG2PNG не смог мою .svg сохранить.

Превью в Chromium тоже кривовато показывает некоторые .svg при открытии Open file ... (GTK?), но на HTML-странице показывает их нормально.

Mirage1_ ★
(19.11.17 19:51:46 MSK) автор топика

Ссылка

Ответ на: комментарий от Mirage1_ 19.11.17 19:37:42 MSK

Слишком старый nodejs.

Если чистым хромом, имеются ввиду расширения (addons) под него?

Просто открываем svg и print screen.

Превью в Chromium тоже кривовато показывает некоторые .svg при открытии Open file ... (GTK?)

В привью используется нативный диалог, а там librsvg, который не очень.

~~RazrFalcon~~ ★★★★★
(19.11.17 20:08:37 MSK)

Ответ на: комментарий от RazrFalcon 19.11.17 20:08:37 MSK

Слишком старый nodejs.

Ну, я попробую 8.9.1

Просто открываем svg и print screen.

1) Кнопка PrtSc под Дебиан не даёт никакого эффекта.

2) Пункт меню Print в Chromium выдаёт диалог печати на принтер.

Mirage1_ ★
(19.11.17 20:19:21 MSK) автор топика

Ответ на: комментарий от Mirage1_ 19.11.17 20:19:21 MSK

1) Это не ко мне.

~~RazrFalcon~~ ★★★★★
(19.11.17 20:21:28 MSK)

Ответ на: комментарий от RazrFalcon 19.11.17 20:21:28 MSK

Я не понял, про какой PrintScreen (2) ты говоришь. Я специально сейчас запустил винду, в Chrome открыл .svg, и что? PrintScreen просто сделает скриншот экрана.

Mirage1_ ★
(19.11.17 20:25:51 MSK) автор топика

Ответ на: комментарий от Mirage1_ 19.11.17 20:25:51 MSK

А как ещё вы хотели получить PNG?

~~RazrFalcon~~ ★★★★★
(19.11.17 20:27:10 MSK)

Ответ на: комментарий от RazrFalcon 19.11.17 20:27:10 MSK

А как ещё вы хотели получить PNG?

Ну, у меня на полке лежит лицензионный Photoshop, мне пожалуй легче поставить его. И так уже 2 часа потратил на сношения с node.js. Чисто ради любопытства оставлю собираться nodejs-8.0.0, может соберётся под моим дебом, и запустит конвертор.

Photoshop Elements умеет полноценно работать с SVG? cast AP.

Mirage1_ ★
(19.11.17 20:31:39 MSK) автор топика

Ссылка

Ответ на: комментарий от RazrFalcon 19.11.17 20:27:10 MSK

Попробовал через Chromium вот этим способом, https://gist.github.com/mbostock/6466603

Он сохранил как надо:

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="512" height="512"></canvas>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var image = new Image;
image.src = "fallback.svg";
image.onload = function() {
  context.drawImage(image, 0, 0, 512, 512);

  var a = document.createElement("a");
  a.download = "fallback.png";
  a.href = canvas.toDataURL("image/png");
  a.click();
};

</script>

Но - обрезал часть картинки. Граница канвы некорректно берётся из SVG.

Думаю, как побороть.

Mirage1_ ★
(19.11.17 21:57:50 MSK) автор топика

Ссылка

Ответ на: комментарий от RazrFalcon 19.11.17 17:21:31 MSK

Короче, часть иконок корректно перегналось через Inkscape, часть через HTML5 canvas (Chrome). Вопрос закрыт.

Mirage1_ ★
(19.11.17 22:19:45 MSK) автор топика

Ссылка

Просто для полноты освещения вопроса: convert чем не угодил? Мне в нём не понравились шрифты, но в остальном он вроде норм.

legolegs ★★★★★
(19.11.17 22:22:12 MSK)

Ответ на: комментарий от legolegs 19.11.17 22:22:12 MSK

Он использует librsvg, который довольно кривой.

~~RazrFalcon~~ ★★★★★
(19.11.17 22:22:33 MSK)

Ссылка

Ответ на: комментарий от Mirage1_ 19.11.17 17:24:38 MSK

А то подозрение, что Inkscape теряет слои.

На чём основаны подозрения?

Erepb ★★★
(20.11.17 09:22:03 MSK)

Ответ на: комментарий от Erepb 20.11.17 09:22:03 MSK

А то подозрение, что Inkscape теряет слои.
На чём основаны подозрения?

Inkscape отрисовывает прямоугольник кнопки, но белый рисунок внутри красной кнопки - нет. Превью в OpenFile-диалоге браузера тоже белый рисунок (поверх красного квадрата) отрисовывает криво. Я пока внутрь SVG-файла не заглядывал, просто интуитивно сделал вывод о слоях.

HTML5 canvas в Chrome отрисовало нормально.

Mirage1_ ★
(20.11.17 15:14:36 MSK) автор топика

Ответ на: комментарий от Mirage1_ 20.11.17 15:14:36 MSK

Так надо бы оформить баг-репорт?

~~ult~~ ★
(21.11.17 21:21:36 MSK)

Ответ на: комментарий от ult 21.11.17 21:21:36 MSK

Язабагрепорт.

Erepb ★★★
(22.11.17 14:04:55 MSK)

Ссылка

Ответ на: комментарий от ult 21.11.17 21:21:36 MSK

Так надо бы оформить баг-репорт?

Надо бы. Но пока времени нет.

Mirage1_ ★
(23.11.17 10:17:30 MSK) автор топика

Ссылка

Ответ на: комментарий от Mirage1_ 19.11.17 17:24:38 MSK

А то подозрение, что Inkscape теряет слои

Как ты это определил?

Photoshop Elements умеет полноценно работать с SVG? cast AP.

Нет. С чего бы ему?

https://helpx.adobe.com/photoshop-elements/kb/supported-file-formats-photosho...

AP ★★★★★
(23.11.17 16:01:38 MSK)

Ссылка

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

peregrine ★★★★★
(23.11.17 16:07:07 MSK)

Ссылка

Похожие темы