Добавить Adobe Illustrator файл в HTML
Мне дали файл.ai (Adobe Illustrator Artwork 19.0) для добавления на мою HTML-страницу. После небольшого тестирования кажется, что я не могу добавить это с помощью обычного <image> тег.
Какова лучшая практика для этого?
3 ответа
Я нахожусь на Inkscape, но вывод иллюстратора также является векторным файлом. Должен быть вывод.svg, попробуйте экспортировать в этот тип вывода, и вы можете использовать его с тегом.
Существует множество способов использования svg в HTML. Вот что я обычно использую:
<img>путь:<img src="url.svg">- Встроенный способ SVG: откройте файл в вашем любимом редакторе (Sublime или notepad), скопируйте код и вставьте его в HTML-код.
редактировать
Чтобы сделать это по-своему:
- Преобразуйте файл.ai в файл.svg. Я успешно сделал с помощью онлайн-инструмента. (Вы можете даже использовать сам вывод svg и использовать его на
<img>тег) - Откройте его в блокноте
- Скопируйте код в файл HTML
- Необязательно: оптимизируйте код SVG, чтобы сделать его короче (для этого есть множество онлайн-инструментов)
Предупреждение. Использование встроенного SVG, особенно очень большого, может сказаться на скорости отклика вашего сайта. Но менее сложные и маленькие должны быть в порядке.
Ну, насколько я знаю, в этом нет никакой практики. Самая близкая вещь, о которой я могу думать, является:
http://ai2html.org/ (вы должны использовать image_format:svg)
Вы также можете экспортировать его в файл другого типа, если это решение для вас.
"Adobe Illustrator Artwork (AI) - это собственный формат файлов, разработанный компанией Adobe Systems для представления одностраничных векторных рисунков в форматах EPS или PDF. Расширение имени файла.ai используется Adobe Illustrator". - https://en.wikipedia.org/wiki/Adobe_Illustrator_Artwork
Вы можете открыть его с помощью Adobe Illustrator или Photoshop и экспортировать в виде файла изображения.
Если бы я был вами, если бы все, что вам нужно, это изображение, просто экспортируйте его как png или jpg и используйте этот новый файл на своей странице.
Вы также можете экспортировать его как вектор и использовать векторное изображение на сайте, если вы не уверены, как, тогда комментарии здесь, по-видимому, помогли объяснить, как, но вот ссылка, которая мне показалась полезной: