Ошибки в коде SVG
20.06.2024 06:46:50 am
Приведу ошибки кода SVG, с которыми встречался сам. Ошибки из за которых иконка отображалась частично, либо не отображалась совсем.
Хочу отметить, что ошибки проявляют себя не везде. Например, я пробовал SVG код в онлайн HTML редакторе, и там не было ни каких ошибок, всё работало безупречно. Вставив этот же код на свой сайт, получал ошибку.
Первая моя ошибка - это отсутствие
И при необходимости обращаюсь к нему:
При первом же включении макета тегом
Строка:
Хочу отметить, что ошибки проявляют себя не везде. Например, я пробовал SVG код в онлайн HTML редакторе, и там не было ни каких ошибок, всё работало безупречно. Вставив этот же код на свой сайт, получал ошибку.
Первая моя ошибка - это отсутствие
xmlns:xlink="http://www.w3.org/1999/xlink". Иконки пишу в отдельном файле ".svg". Чтобы не плодить повторяющий код, написал макет (Блог: Копирование SVG): <defs>
<g id="model">
<!-- Код макета -->
</g>
</defs>И при необходимости обращаюсь к нему:
<use xlink:href="#model"/>При первом же включении макета тегом
<use>, с экрана исчезли все иконки. После добавлении строки: xmlns:xlink="http://www.w3.org/1999/xlink", всё заработало, как хотелось:<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">Строка:
xmlns:xlink="http://www.w3.org/1999/xlink" сообщает, что ниже находиться xlink стандарт, который предложен организацией w3.- Жалоба
21.06.2024 06:47:09 am
Ещё одна ошибка, которую я допустил, с тегом
Я решил, что буду закрывать тег:
Но, при первом написании иконки, это спровоцировало ошибку (Не знаю какую) и иконка не отобразилась. Убрав закрывающий тег, всё стало на свои места, иконка появилась на экране:
<path>. Я искал в интернете, как правильно, должен ли иметь закрывающий тег <path> или нет. Скаченные мной иконки для пробы были, как с закрывающим тегом, так и без него. Оба варианта работали, иконки отображались.Я решил, что буду закрывать тег:
<path d="m47 7h-31v-6h28a3 3 0 0 1 3 3z" fill="var(--smoke)"></path>Но, при первом написании иконки, это спровоцировало ошибку (Не знаю какую) и иконка не отобразилась. Убрав закрывающий тег, всё стало на свои места, иконка появилась на экране:
<path d="m47 7h-31v-6h28a3 3 0 0 1 3 3z" fill="var(--smoke)"/>
21.06.2024 07:32:50 am
Ошибка с тегом
Я по аналогии, как с тегом
После чего иконка выводится на экран частично, ровно до неправильно написанного тега. Я добавляю закрывающий тег:
И всё сразу отображается.
Хочу отметить, что при написании закрывающего тега
Должно быть так:
<rect>, из за которой у меня отобразилась только часть иконки, та часть, что была до тега <rect>.Я по аналогии, как с тегом
<path> (Предыдущее сообщение), решил, что буду писать все теги без закрывающего, так и делал. Приходит время использовать тег <rect>, и я его пишу без закрывающего:<rect fill="var(--cool)" height="20" rx="3" width="18" x="41" y="39"/>После чего иконка выводится на экран частично, ровно до неправильно написанного тега. Я добавляю закрывающий тег:
<rect fill="var(--cool)" height="20" rx="3" width="18" x="41" y="39"></rect>И всё сразу отображается.
Хочу отметить, что при написании закрывающего тега
</rect>, слэш в конце открывающего необходимо убрать:<rect fill="var(--cool)" height="20" rx="3" width="18" x="41" y="39"/>Должно быть так:
<rect fill="var(--cool)" height="20" rx="3" width="18" x="41" y="39"></rect>