Почему firefox определяет ошибку в svg, а в chrome все ок?

Question

[lagudal]

Приветствую, есть необходимость вывести фоном svg (dotted europe map) - вывожу его полным кодом, таким образом:

background-color:#000000;
background-image: url('data:image/svg+xml,<svg version="1.1" id="europe-map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px" height="800px" viewBox="0 0 1920 800" enable-background="new 0 0 1920 800" xml:space="preserve"> <pattern x="413.7" y="810.8" width="2.125" height="2.125" patternUnits="userSpaceOnUse" id="SVGID_1_" viewBox="0 -2.125 2.125 2.125" overflow="visible"> <g> <polygon fill="none" points="0,0 2.125,0 2.125,-2.125 0,-2.125 "/> <g> <polygon fill="none" points="0,-2.125 2.125,-2.125 2.125,0 0,0 "/> <path fill="#5F5F5F" d="M0.495-1.063c0-0.313,0.254-0.565,0.567-0.565S1.63-1.375,1.63-1.063c0,0.313-0.254,0.567-0.567,0.567 S0.495-0.749,0.495-1.063z"/> </g> </g> </pattern> ..../></svg>');

(Полный код тут)
Если открыть исследуемый url в google chrome, то все в порядке, однако в firefox не все так хорошо:

XML Parsing Error: unclosed token....
......
Line Number 1, Column 537:

ну и указывает на якобы незакрытый тег path, который, как видно в коде, очень даже закрыт.
И при этом ff некорректно отображает данный svg даже как картинку -
вот этот svg картинкой
В хроме, опять таки, картинка отображается нормально.
Предположение следуещее.
Для того чтобы минимизировать этот svg, я использую простейший паттерн, наложенный на замкнутый контур. В противном случае, если выводить каждую точку - по сути окружность - размер файла увеличивается с 18-19 кб до 1мб и более. Отсюда предположение, что ff не умеет или как то по другому взаимодействует с тегом pattern в теле svg.

Есть ли корректное решение данной проблемы, все равно как, главное, чтобы при этом сохранился небольшой размер?
Желательно кроме как разные фоны для разных браузеров, т.е. не хотелось бы грузить и минимизировать еще и jpg, который при заметно худшем качестве заметно больше в размере?

Answer 1

[Максим Тимофеев]

Adobe Illustrator 15.1.0, SVG Export Plug-In

Гарантия кучи говноразметки. Так что для начала надо избавится от нее, проще всего юзать: https://jakearchibald.github.io/svgomg/

И стоит указывать кодировку:

background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

Comments

[lagudal]

Проблема все таки в паттерне, минимизация кода решила проблему ошибки, но точки(окружности) по прежнему невидимы...

[Максим Тимофеев]

lagudal, а почему бы не подключить в html Ваш svg? Можно иметь 1 файл svg, грузить ссылкой, и юзать его части.

[lagudal]

Максим Тимофеев, решил проблему, на всякий случай оставляю решение, вдруг еще кому то пригодится, ну и чтобы самому не забыть ))
Перечитав в гугле кучу подобных проблемных топиков, понял, что паттерн таки работает в ff, но при этом должен быть максимально простым. В моем же случае, если посмотреть внимательнее на код, можно заметить что паттерн реализован несколько витиевато, при этом немного сдвинут на строго определенные расстояния по осям. На самом деле, это было сделано для того, чтобы после наложения паттерна на контур, в данном случае это кривая карта Европы, не оставалось откусанных кусков от паттернов, чисто эстетически некрасиво, когда куча таких огрызков.
Немного помучавшись, плюнул и упростил все - упростил паттерн, уменьших его диаметр, и теперь хотя и есть небольшие остатки, выглядят они не так безобразно как при более крупном размере.
И в ff все заработало )

[Максим Тимофеев]

lagudal, кинь результат в jsfiddle или codepen с двумя svg типа "работает" и "не работает". Наверняка пригодится кому-то