我一直在关于响应式网页设计的Treehouse上做一个教程 . 在本教程的这一点上，我们被要求将图像转换为svg，以便它可以完全响应地缩放 .
我使用免费软件Inkscape，而不是使用我不拥有的Adobe Illustrator . 转换图像后，我们被要求在文本编辑器中打开图像并从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"
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标记中的“高度”和“宽度” .
4 回答
您刚刚在SVG中放置光栅图像这一事实并不是您所看到的实际原因 .
这意味着当SVG的缩放正常工作（见下文）时，您将看不到使用矢量图稿的好处 . 当您放大矢量图稿时，您不会得到缩放位图时获得的“锯齿”（块状） . 如果您的SVG只包含一个位图，它与使用位图几乎相同 .
这里的实际问题是Inkscape在它保存的SVG中不包含viewBox属性 .
删除“width”和“height”属性时，它们默认为“100％” . 这告诉浏览器缩放SVG以适合父容器 . 不幸的是，为了使这种扩展工作，浏览器需要知道SVG内容的维度是什么 . 这就是viewBox属性的用途 .
Illustrator添加了viewBox属性，而Inkscape则没有 .
要查看我的意思，请在删除宽度和高度后将以下内容添加到
<svg>标记中：您应该会发现您的图像不再被剪裁，并且会在调整页面大小时调整大小 .
如果将文件另存为“优化的svg”，Inkscape现在提供启用视图框的选项 . 非常便利！
你've done something wrong if you' re "converting"光栅到矢量图形 . 没有使用Inkscape，我不能说，但至少according to Wikipedia它无法执行转换 .
您尚未转换任何内容，您的图像采用图形交换格式！
要查看"real" SVG文件的外观，请打开example from the wiki page .
你可以read it here（和完成qed's answer）：