Туториал по работе с svg

[tyanas]

1. добавление свг напрямую (<svg:svg>...). Зачем нужен namespace

2. типичный кейс свг для иконок как symbol (<b:svg>...)
   2.1 symbol надо готовить

   • 2.1.1 define gradients (and other stuff) outside symbol see svg: gradients are invisible if symbols are appended in DOM with display:none basisjs#141
   • 2.1.2 mask внутри symbol может привести к тому что иконка будет не видна в ИЕ11

   2.2 типичный пример <b:svg use="/pathToSvgDefs/symbol-defs.svg#iconSvg-desktop"></b:svg> (c) @sm0g

   2.3 символы хороши тем, что
   - они эффективно переиспользуются на странице ( в отличие от "инлайн" svg)
   - можно менять цвет с помощью css (on hover) (в отличие от вставки svg как background: url(icon.svg))

3. надо заресерчить, почему по некоторым (или по всем?) иконкам в ИЕ не получается кликать

вопросы из https://gitter.im/basisjs/basisjs

1. @sm0g почему не ренднрятся SVG элементы (Chrome) в темплейтах?

<svg aria-hidden="true" class="octicon octicon-plus" width="12" height="16" role="img" version="1.1" viewBox="0 0 12 16">
    <path d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path>
</svg>

Ответ: нужен namespace, см ниже

2. @harvyso февр. 07 12:43
   работает ли basisjs c SVG также как c HTML DOM, есть примеры?
   template: "<b:svg><circle cx='10' cy='20' r='10' /></b:svg>"
   svg добавлен как element, но почему circle как text node?
   добавление xmlns:svg = 'http://www.w3.org/2000/svg' и изменение circle на svg:circle не помогает.
   можете пояснить как обстоит дело с SVG!?

ответы к 2:

Alexey Smirnov @sm0g февр. 07 13:34
Я делал через use <b:svg use="/pathToSvgDefs/symbol-defs.svg#iconSvg-desktop"></b:svg>
попробуйте объявить svg элементы в отдельном файле (спрайты) добавить в шаблон. Далее использовать через use

Roman Dvornov @lahmatiy февр. 07 22:09
работает так же как с HTML, но нужно добавлять префикс svg:, то есть правильно будет
template: "<svg:svg><svg:circle cx='10' cy='20' r='10' /></svg:svg>"

Когда svg вставляется в html, то браузерный парсер неявно добавляет неймспейс узлам
Но если вы сделаете document.createElement('svg'), то будет создана HTML нода, а не SVG. Для того чтобы сделать правильно, нужно document.createElementNS('svg', 'http://www.w3.org/2000/svg')
по идее при вставке в html нужно писать так
<svg:svg xmlns:svg="http://www.w3.org/2000/svg"><svg:circle cx='10' cy='20' r='10' /></svg:svg>
но это сложно для большинства, потому, как писал выше, разработчики браузеров это упростили

Roman Dvornov @lahmatiy февр. 07 22:16
кстати да, нужно
template: '<svg:svg><svg:circle cx="10" cy="20" r="10" /></svg:svg>'
одинарные кавычки не разрешены для атрибутов в XML/XHTML, парсер шаблонизатора ведет себя как XHTML парсер, поэтому встретив ' он посчитал конструкцию неверной для тега и сконвертировал все в текст
так вот, в шаблонизаторе basis'е нет словарей для тегов, что что-то относится к другому неймспейсу, но он умеет работать с неймспейсами
сейчас там зашиты неймспейсы svg и xlink https://github.com/basisjs/basisjs/blob/master/src/basis/template/namespace.js

конец ответов к 2

[tyanas]

https://gitter.im/basisjs/basisjs?at=58e79624f22385553d1aa332
еще пример, что можно придумать с b:svg пока нет доки :(

[tyanas]

https://validator.nu/ - хоть какой-то валидатор svg

[tyanas]

https://github.com/basisjs/articles/blob/about-b-svg/ru-RU/template/b-svg.md