Question

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

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

  img, object {
max-width: 100%;
}

然而，在移除高度和宽度后，图像没有响应，而是奇怪地剪裁如下：

enter image description here

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

对不起，如果之前有问题，我找不到。

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"
   width="319"
   height="177"
   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-width="640"
     inkscape:window-height="480"
     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
     width="319"
     height="177"
     xlink:href="

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

Answer 1

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

Answer 2

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

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

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

删除“width”和“height”属性时，默认为“100％”。这告诉浏览器缩放SVG以适合父容器。不幸的是，为了使这种扩展工作，浏览器需要知道SVG内容的维度是什么。这就是viewBox属性的用途。

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

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

viewBox="0 0 319 177"

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

Answer 3

如果你正在“将光栅转换为矢量图形”，那么你做错了什么。没有使用过Inkscape，我不能说，但至少according to Wikipedia它无法执行转换。
您尚未转换任何内容，您的图片采用图形交换格式！

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

Answer 4

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

选择要导出的对象

打开文档属性窗口（ Ctrl + Shift + D ）

选择“将页面调整为绘图或选择”

文件＆gt;另存为副本......

选择优化的SVG作为格式

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

4 个答案: