如何为响应式网页设计准备 Inkscape SVG 文件？

Posted 2023-03-06

【中文标题】如何为响应式网页设计准备 Inkscape SVG 文件？

【英文标题】：How can I prepare an Inkscape SVG file for responsive web design?

【发布时间】：2013-12-03 10:02:37

【问题描述】：

我一直在做关于响应式网页设计的 Treehouse 教程。在本教程的这一点上，我们被要求将图像转换为 svg，以便它可以完全响应地缩放。

我没有使用我不拥有的 Adob​​e Illustrator，而是使用了免费软件 Inkscape。一旦图像被转换，我们被要求在文本编辑器中打开图像并从 svg 声明中删除高度和宽度要求，并将对象选择器添加到我们的最大宽度规则到我们的样式 css：

  img, object 
max-width: 100%;
    

但是，在删除高度和宽度后，图像没有响应，而是像这样奇怪地被剪裁了：

有人知道我犯了什么错误吗？或者我应该删除什么？

抱歉，如果之前有人问过这个问题，我找不到。

edit1，代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   
   
   sodipodi:docname="logo.gif">
  <metadata
     id="metadata2991">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs2989" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-
     inkscape:window-
     id="namedview2987"
     showgrid="false"
     inkscape:zoom="0.94984326"
     inkscape:cx="159.5"
     inkscape:cy="88.5"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2985" />
  <image
     
     
     xlink:href="

这是我删除的第一个 SVG 标记中的“高度”和“宽度”。

【问题讨论】：

请出示您的代码。

查看 CSS 媒体查询，link

<image 之后缺少代码，但看起来您的 svg 中有一个不是矢量的图像！

您创建的是一个包含原始图像栅格的 svg 文件。您还没有完成教程想要的将栅格转换为矢量的操作。

缺失的代码是700行实际图片数据后跟：id="image2993" x="0" y="0" />

【参考方案1】：

如果您将栅格“转换”为矢量图形，您就做错了。我不能说没有使用过 Inkscape，但至少 according to Wikipedia 它无法执行转换。

您尚未转换任何内容，您的图像是图形交换格式！

要查看“真实”SVG 文件的外观，请打开 example from the wiki page。

【讨论】：

这完全有可能——我几个小时前才了解 SVG。但它肯定说它有一个 .SVG 扩展名。我确实通过打开原始 .gif 然后点击文件、另存为并从下拉列表中选择 .svg 来更改它。

感谢大家的帮助。抱歉，原来是个愚蠢的错误。

Inkscape 有方便的“Trace Bitmap”工具，可以根据导入的光栅图像创建一个新的矢量对象

@rob 是的，我在几年前就发现了自己。在紧要关头很方便，但会产生大量的褶皱。

【参考方案2】：

您刚刚在 SVG 中放置了光栅图像这一事实并不是您所看到的实际原因。

这意味着当 SVG 的缩放工作正常时（见下文），您将看不到使用矢量图的好处。当你放大矢量图稿时，你不会得到放大位图时得到的“锯齿”（块状）。如果您的 SVG 仅包含位图，则与仅使用位图几乎相同。

这里的实际问题是 Inkscape 在它保存的 SVG 中不包含 viewBox 属性。

当您删除“宽度”和“高度”属性时，它们默认为“100%”。它告诉浏览器缩放 SVG 以适应父容器。不幸的是，要使这种缩放起作用，浏览器需要知道 SVG 内容的尺寸。这就是 viewBox 属性的用途。

Illustrator 添加了 viewBox 属性，Inkscape 没有。

要明白我的意思，请在删除宽度和高度后将以下内容添加到您的 <svg> 标记中：

viewBox="0 0 319 177"

您应该会发现您的图像不再被剪裁，并且会在调整页面大小时调整大小。

【参考方案3】：

如果您将文件保存为“优化的 svg”，Inkscape 现在提供了启用视图框的选项。 很方便！

【讨论】：

不幸的是，这个功能在原版 Mac 或 Windows 客户端中尚不可用，因为它需要一个 ubuntu python 扩展。不过你可以破解它~> answers.launchpad.net/inkscape/+question/194132

从 0.91 开始，会自动添加一个 viewBox。有用！见wiki.inkscape.org/wiki/index.php/…

【参考方案4】：

你可以read it here（以及完成qed's answer）：

选择要导出的对象 打开文档属性窗口（Ctrl+Shift+D） 选择“将页面大小调整为绘图或选择” 文件 > 另存为副本... 选择优化的 SVG 作为格式