将adobe illustrator文件添加到HTML中

Question

我得到了一个.ai (adobe illustrator artwork 19.0)文件添加到我的超文本标记语言页面。经过一些测试，我似乎不能用一个普通的<image>标签来添加它。

这方面的最佳实践是什么？

Answer 1

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

在HTML上使用svg的方法有很多种，下面是我常用的方法：

1. <img>方式：<img src="url.svg">
2. Inline SVG方式:在您最喜欢的编辑器(Sublime或记事本)中打开文件，复制代码并将其传递到<img src="url.svg">
3. Inline代码中。

编辑

按照你的方式去做：

• 将.ai文件转换为.svg文件。我使用在线工具成功地做到了这一点。(您甚至可以使用输出file
• Optional:本身并在<img>标记上使用它)
• 在记事本中打开它
• 将代码复制到HTML file
• Optional: optimize svg代码以使其更短(有很多在线工具可以做到这一点)

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

Answer 2

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

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

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

Answer 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，并在页面上使用那个新文件。

你也可以将其导出为矢量，然后在网站上使用矢量图像，如果你不确定如何使用，那么这里的评论似乎已经帮助解释了如何解释，但这里有一个我发现有用的链接：

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