Pug и SVG — как быть?

Question

[rurobud]

Как быть с использованием инлайн SVG в Pug/Jade?
Там ведь xml код.
Это серьезный блок.
Блин, пару недель работаю в Pug, кучу всего перевел, но если нельзя SVG тупо использовать - то в помойку все. Я в шоке.

Answer 1

[Константин Давыдов]

html2jade.org
html2jade.aaron-powell.com

Comments

[rurobud]

Не переводит он мой SVG, эти конвертеры глюк сплошной

[Константин Давыдов]

rurobud: Странно конечно. Сам не раз пользовался как раз для svg.
Тогда только как посоветовал Igor Koch

Answer 2

[Igor Koch]

doctype html
html
  head
  body
    svg(width="200px", height="230px", version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink")
      circle/(cx="100", cy="100", r="100", fill="#000")
      circle/(cx="100", cy="100", r="95", fill="#ff0")

или

include path/to/icon.svg

Comments

[rurobud]

Первый вариант - так я ведь полчаса убью переводя SVG на формат Pug. Это же нерационально! В реальном мире код в 20 раз объемней, чем тот что вы выложили.

Второй вариант - два вопроса. Это будет инлайн SVG? Т.е. он сам переведет xml в нужный формат (или просто пропустит перевод, насколько я понял). Это работает во Vue компоненте? Я не использую Pug для шаблонизации!!!

Мдаа...Не ожидал такой подлянки. Очень мерзкое ощущение.

[rurobud]

Второй вариант - это не работает во vue-loader. Печалька. Pug идет в помойку.

[Igor Koch]

rurobud:

.backoffice__settings__yellow-bg.mt20
  .xml-code
    code
      svg.
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
          <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
          <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text>
        </svg>

Можно и так, второй вариант не требует перевода в pug

[rurobud]

.backoffice__settings__yellow-bg.mt20
  .xml-code
    code
      svg.
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
          <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
          <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text>
        </svg>

Вот это интересно, где об этом почитать?
Какой код мне нужен? .backoffice__settings__yellow-bg.mt20 - это я так понимаю опечатка? Что это такое вообще???

[Igor Koch]

rurobud: https://codepen.io/whata/pen/qjKBXq

[rurobud]

Igor Koch: не понял. Я что могу вставлять чистый xml код в Pug?

[rurobud]

Не принимает у меня Pug чистый SVG код. Я не понимаю как это работает.

[Dark Hole]

rurobud: RTFM
Что такое RTFM - погуглите :D

[rurobud]

Блин ну я или совсем туплю или просто дурак - нифига не пойму))) Разжевали бы несчастному, лол!

Answer 3

[Николай Семенов]

Попробуйте миксин

mixin icon(name, url)
  - mod = mod || ''
    a(href="#{url}" class="#{name}_link")
      svg(class="icon icon-" + name)
        use(xlink:href="/assets/img/sprite.svg#" + name)

это миксин иконка ссылкой, для svg спрайта...если ссылка не нужна просто перепишите мексин, основная идея понятна. вместо спрайта просто напишите name и он из папки будет брать соответствующий svg
use(xlink:href="/assets/img/" + name + ".svg"

Comments

[rurobud]

К сожалению, не работает это все во .vue файлах...Я использую pug только из-за удобного и аккуратного синтакса.

[Николай Семенов]

rurobud: код компонента покажите? в части template

[rurobud]

Николай Семенов: какой код? Я пробовал только конвертированный SVG с html2jade.org

Выбил ошибку. Больеш я ничего не пробовал.

[rurobud]

Инклуды и тд не работает и не одобряется в использовании .vue

[Николай Семенов]

rurobud: вставьте так

svg(class="icon")
        use(xlink:href="/assets/img/image.svg")

[rurobud]

Николай Семенов: это будет инлайн свг? Я смогу применять анимацию и тд?