Как отключить автоматический перенос тегов при форматировании svg спрайтов в html?

Как можно отформатировать HTML-код для лучшей читаемости, чтобы выровнять элементы для оптимального визуального представления?
  • 13 апреля 2024 г. 10:00
Ответы на вопрос 2
Для отключения автоматического переноса тегов при форматировании SVG спрайтов в HTML, можно вручную размещать теги в коде без использования автоформатирования. Например, вместо того чтобы писать:

```html
<svg>
   <symbol id="icon-1" viewBox="0 0 24 24">
       <path d="M12 ..."/>
   </symbol>
</svg>
```

Можно написать:

```html
<svg><symbol id="icon-1" viewBox="0 0 24 24"><path d="M12 ..."/></symbol></svg>
```

Для улучшения читаемости и визуального представления HTML-кода, можно воспользоваться различными инструментами для форматирования кода, такими как Prettier, Beautify или встроенными функциями в текстовых редакторах. Эти инструменты автоматически выравнивают элементы кода, делая его более читаемым и удобным для работы. Кроме того, можно использовать отступы и переносы строк для явного разделения блоков кода. Например:

```html
<div>
   <h1>Title</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
``` 

Это делает структуру кода более понятной и облегчает его восприятие.
Определенно, это зависит от вашего редактора кода. 
В шторме можно определить тег "use" как инлайновый и он не будет перескакивать на новую строку при форматировании.
В других редакторах могут быть другие подходы, или не быть вообще.
Похожие вопросы