0
私は、Webページのsvgイメージを適切にサイズ変更してサイズを変更し、正しくフローさせることに苦労しました。私はあきらめて、それをpngに変換することに決めました。SVGがベクターエディタで正しく開かれない、またはImageMagickを使用して正しく変換されない
<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などのベクタエディタでは正しく表示されません。また、ImageMagickのと正しく変換されない
：例えば、Inkscapeはのように見えます。
にかなり近づく私は次は何を試してみてください？
- あなたが正しくレンダリングされませんので注意してください。下に沿ってテキストを含む矩形が切り取られます。私はjavacriptで 'viewBox'をプログラム的に設定して遊びました。そして' viewBox'は165の高さに対応する（丸められた） '" 0 0 16 149 "'です。私はsvgを 'viewBox '' 0 0 1920 165 ''のうち、改善は見られません。 – abalter
申し訳ありません。私はviewBoxに少し間違っている。私はそれを修正しました。 –
残念ながら、これはinkscapeで開くことや、imagemagickで変換することでは役に立ちません。同じ問題。 – abalter