将 adobe illustrator 文件添加到 HTML答案

【问题标题】：Add adobe illustrator file into HTML将 adobe illustrator 文件添加到 HTML
【发布时间】：2017-10-27 06:11:44
【问题描述】：

我获得了一个 .ai（adobe illustrator 作品 19.0）文件，可以添加到我的 HTML 页面中。经过一番测试后，我似乎无法使用普通的<image> 标签添加它。

这方面的最佳做法是什么？

【问题讨论】：

我知道我们说的是要插入的小资产（徽标、图表、地图...），而不是要实现的完整页面设计，对吗？
没错。为什么这个问题被否决了......？

标签： html css vector-graphics adobe-illustrator

【解决方案1】：

嗯，据我所知，没有任何这种做法。我能想到的最接近的事情是：

http://ai2html.org (你必须使用 image_format:svg)

如果这是适合您的解决方案，您也可以将其导出为其他文件类型。

【讨论】：

【解决方案2】：

我在 Inkscape 上，但插画家的输出也是矢量文件。应该有一个 .svg 输出，尝试导出到该输出类型，您可以将其与标签一起使用。

有多种方法可以在 HTML 上使用 svg 以下是我常用的：

<img>方式：<img src="url.svg">
内联 SVG 方式：在您喜欢的编辑器（Sublime 或记事本）中打开文件，复制代码并将其粘贴到 html 代码中。

编辑

按照自己的方式去做：

将 .ai 文件转换为 .svg 文件。我通过使用在线工具成功地做到了。（您甚至可以使用输出 svg 本身并在 <img> 标签上使用它）
在记事本中打开
将代码复制到 HTML 文件中
可选：优化 SVG 代码以使其更短（有很多在线工具）

警告：使用内联 SVG，特别是非常大的 SVG 可能会影响您网站的响应能力。但不那么复杂和小的应该没问题。

【讨论】：

感谢您的回答@kdyz 不幸的是我不允许更改文件:(
@BarneyChambers 编辑了它。
@BarneyChambers 他们你可能已经完成了。 Adobe Illustrator 是一种非常专业的格式。除非您安装查看器，否则您甚至无法在普通台式计算机中打开它，尽管如此，还是在浏览器中。就好像你被要求在 HTML 中嵌入气味 :)

【解决方案3】：

“Adobe Illustrator Artwork (AI) 是 Adobe Systems 开发的专有文件格式，用于以 EPS 或 PDF 格式表示基于矢量的单页绘图。Adobe Illustrator 使用 .ai 文件扩展名。” - https://en.wikipedia.org/wiki/Adobe_Illustrator_Artwork

您可以使用 Adobe illustrator 或 photoshop 打开它，然后将其导出为图像文件。

如果我是你，如果你想要的只是一张图片，那么只需将其导出为 png 或 jpg 并在你的页面上使用该新文件。

您也可以将其导出为矢量并在网站上使用矢量图像，如果您不确定这里的 cmets 似乎帮助解释了如何，但这里有一个我觉得有用的链接：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

【讨论】：