【发布时间】：2017-10-02 14:37:12
【问题描述】：
我一直在努力在网页中正确调整和缩放 svg 图像的大小并使其正常流动。我决定放弃并将其转换为 png。
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1920" height="165px"
viewBox="0 0 1920 165"
>
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Bitter');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
</style>
<style>
:root {
--graphics: #670309;
--logo-text: #282B28;
--services: #fff;
--bottom-bar-font-size: 0.8em;
}
.house{
fill: none;
stroke: var(--graphics);
}
.bottom{
fill: var(--graphics);
stroke: none;
}
.logo{
fill: var(--logo-text);
stroke: none;
}
.features{
fill: #282B28;
stroke: none;
}
.services {
fill: var(--services);
stroke: none;
text-anchor: start;
alignment-baseline="middle"
font-weight="400"
font-family="Roboto Condensed"
letter-spacing="0.03em"
}
.service {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
.separator {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
</style>
</defs>
<g id="whole-logo" transform="translate(0,0)scale(1)">
<svg>
<!-- ROOF -->
<path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- CHIMNEY -->
<path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>
<!-- LEFT WALL -->
<path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- RIGHT WALL -->
<path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- DOOR -->
<rect x="60" y="95" height="45" width="25" class="features"/>
<!-- SINGLE WINDOW DEFINITION -->
<defs>
<rect id="window" x="0" y="0" width="10" height="10" class="features"/>
</defs>
<!-- WINDOWS -->
<g transform="translate(105,95)">
<use href="#window" transform="translate(0 0)"/>
<use href="#window" transform="translate(0 12)"/>
<use href="#window" transform="translate(12 0)"/>
<use href="#window" transform="translate(12 12)"/>
</g>
<!-- BOTTOM BAR AND TEXT -->
<g transform="translate(0,140)">
<svg width="100%" height="25px">
<rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
<text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
<tspan class="service">residential</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">commercial</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-purchase</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-sale</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">warranty</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">expert-witness</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">sewer</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">radon</tspan>
</text>
</svg>
</g>
<!-- HOUSE DETECTIVES LLC -->
<g id="biz-name" transform="translate(265,140)scale(0.8)">
<line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
<text dx="70px" dy="0"
text-anchor="start"
font-size="38px"
font-family="Roboto Slab"
font-weight="bold"
transform="rotate(-90)"
class="logo">the</text>
<text dx="0" dy="0"
text-anchor="start"
font-size="78px"
font-family="Roboto Slab"
font-weight="bold"
class="logo">
<tspan class="name" x="5" dx="0" dy="-73">House</tspan>
<tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
<tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
</text>
</g>
</svg>
</g>
</svg>我的 svg 在浏览器中渲染得很好，我已经用validator.nu 验证了它。但是，它无法在我尝试过的任何矢量编辑器中正确打开，包括 Inkscape 和其他。例如，Inkscape 看起来像：
它也不能用 ImageMagick 正确转换。
我和drawsvg.org很接近
接下来我应该尝试什么？
【问题讨论】：
标签： svg png imagemagick-convert