may88seiji
6/23/2017 - 9:42 AM

svg インスタンス　http://www.billionplan.com/blog/design/svg-logo-smartphone.html

svg インスタンス　http://www.billionplan.com/blog/design/svg-logo-smartphone.html

use.html
content_copyfile_download
        <h1 class="header-logo">
          <svg>
           
            <style type="text/css">
            </style>
            <defs>
              <linearGradient id="MyGradient">
                <stop offset="33%" stop-color="#505a8c" />
                <stop offset="66%" stop-color="#326496" />
                <stop offset="100%" stop-color="#377887" />
              </linearGradient>
            </defs>
           
            <title>findknow</title>
            <use xlink:href="#logo_findknow"></use>
          </svg>
        </h1>
svg.scss
content_copyfile_download
.header-logo {
  float: left;
  svg {
    width: 150px;
    height: 36px;
    transition-property: all;
    transition: 1.5s linear;
    @include mqTB {
      width: calc-vw(150,1280);
      height: calc-vw(36,1280);
    }
  }
  @include mqSP {
    float: none;
    z-index: $sp-header-logo;
    position: relative;
    svg {
      width: calc-vw(125,320);
      height: calc-vw(60,320);
//      margin-top: calc-vw(15);
      margin-left: calc-vw(20);
    }
  }
  &:hover svg{
    fill:url(#MyGradient);
  }
}

.defs {
  display: none;
}
md.md
content_copyfile_download
  • Rendered
  • Source
  • svgタグ内のdefsタグを削除
  • svgタグの不要な属性を削除（xmlns:a~、style、widthなど）
  • svgタグにclass=”defs”を付与
  • svgタグ内にsymbolタグを追加し、ユニークなidを付与
  • symbolタグに、svgタグからviewBoxの指定を移す
  • symbolタグ内のインデントや空白・改行を削除

###修正したコードを、body開始タグ直後に挿入

<div class="logo">
<svg>
<title>BILLIONPLAN JAPAN Co, Ltd</title>
<use xlink:href="#logo_BPJ"/>
</svg>
</div>

###余白の消去

.defs {
display: none;
}

###IDで呼び出し使用

svg.svg
content_copyfile_download
  • Rendered
  • Source