Как создать масштабируемый и доступный SVG-значок.
Значок должен быть простым, масштабируемым и без лишних скриптов или внешних ссылок. Решите, декоративный он или смысловой, и задайте доступную подпись в месте использования.
Адаптируйте процесс под свою задачу.
Определите значение, viewBox, обводку или заливку и размер. Создайте минимальный SVG без лишних внешних связей и проверьте в реальных размерах. Настройте доступность на месте применения, учитывая имя окружающей кнопки.
- Что вы предоставляете
- Простая идея значка и стилевые ограничения.
- Что вы получите
- Редактируемый SVG с viewBox и доступной подписью.
Посмотрите входные данные и результат.
Иллюстративные входные и выходные данные · учебный пример, а не реальный запуск WebAct
Полей ввода: Пример
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
Готовый пример
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Give the surrounding button an accessible name such as Add item.
Добавьте эти данные в промпт и скопируйте его в WebAct, чтобы попробовать задачу. Ваш результат может отличаться от примера.
Решения и устранение проблем.
Нужно ли отдельно озвучивать декоративный SVG внутри подписанной кнопки?
Обычно скрывайте его от вспомогательных технологий: доступное имя кнопки уже сообщает действие.
Почему значок обрезан при правильных координатах контура?
Обводка выходит за линию контура. Проверьте viewBox, поля и отображаемые границы при нужной толщине.
Попробуйте на собственном источнике.
Замените пример своим материалом в промпте. Сохраните нужные требования и скопируйте задачу в WebAct.
Настроить и скопировать задачу ↑