如何为响应式web设计准备Inkscape SVG文件？
我一直在做一个关于Treehouse的响应式网页设计的教程。在本教程中的这一点上，我们被要求将图像转换为svg，以便它可以完全响应缩放。
我没有使用我没有的Adobe 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"
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标记中的"height“和"width”。
回答 2
Stack Overflow用户
发布于 2013-11-21 06:49:42
您刚刚在SVG中放置了一个光栅图像，这并不是您所看到的内容的真正原因。
这意味着当SVG的缩放功能正常工作时(见下文)，您将看不到使用矢量图稿的好处。当你放大矢量图片时，你不会得到你在放大位图时得到的“锯齿”(块状)。如果您的SVG只包含一个位图，则与仅使用位图基本相同。
这里的实际问题是，Inkscape在它保存的SVG中没有包含viewBox属性。
当您删除"width“和"height”属性时，它们默认为"100%“。它告诉浏览器缩放SVG以适应父容器。不幸的是，要让这种缩放起作用，浏览器需要知道SVG内容的尺寸。这就是viewBox属性的用途。
Illustrator添加了viewBox属性，而Inkscape不添加。
要理解我的意思，在删除宽度和高度之后，将以下内容添加到<svg>标记中：
viewBox="0 0 319 177"您应该会发现，图像不再被剪裁，并将在调整页面大小时调整大小。
Stack Overflow用户
发布于 2014-05-21 04:08:26
Inkscape现在提供了一个选项，如果您将文件另存为"optimized svg“，则可以启用viewbox。非常方便！
https://stackoverflow.com/questions/20078539
复制相似问题