SVG无法在矢量编辑器中正确打开或使用ImageMagick正确转换

时间：2017-10-02 14:37:12

标签： svg png imagemagick-convert

我一直在为能够在网页中正确调整和缩放svg图像并使其正常流动而苦苦挣扎。我决定放弃并将其转换为png。

＆＃13;
＆＃13; 
<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">&#9632;</tspan>
            <tspan class="service" dx="5px">commercial</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-purchase</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-sale</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">warranty</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">expert-witness</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">sewer</tspan>
            <tspan class="separator" dx="5px">&#9632;</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>
＆＃13;
＆＃13;
＆＃13;

我的svg在浏览器中渲染得很好，我已经用validator.nu验证了它。但是，它在我尝试包含Inkscape和其他人的任何矢量编辑器中都无法正常打开。例如，Inkscape看起来像：

enter image description here

使用ImageMagick也无法正常转换。

enter image description here

我与drawsvg.org

非常接近

enter image description here

我接下来应该尝试什么？

1 个答案:

答案 0 :(得分：0)

百分比值在viewBox属性中无效。 viewBox属性的目的是告诉浏览器SVG内容周围的边界框的尺寸。

对于你的SVG，适合viewBox将是：

viewBox="0 0 620 165"

＆＃13;
＆＃13; 
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="100%" height="165px"
   viewBox="0 0 620 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">&#9632;</tspan>
            <tspan class="service" dx="5px">commercial</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-purchase</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">pre-sale</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">warranty</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">expert-witness</tspan>
            <tspan class="separator" dx="5px">&#9632;</tspan>
            <tspan class="service" dx="5px">sewer</tspan>
            <tspan class="separator" dx="5px">&#9632;</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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题