SVGで可変サイズ対応の背景フレームを作る

可変サイズのボックスにオブジェクトフィットする背景SVGを作ります。

デモ

可変サイズ対応のSVG

上の2つは同じ SVG を表示しています。どのサイズでも4つの角に固定サイズのオブジェクトが表示されます。

SVG をビューポートとビューボックスのサイズを指定しないで作成します。拡大縮小してもオブジェクトのサイズが変わらなくなります。

左上のベースのオブジェクトを回転させて他の3箇所のシンボルを作って100%からサイズ分をマイナスして表示しています。正直複雑なオブジェクトじゃないなら個別に作ってしまった方が回転させる手間が無いので楽です。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!--ベースのオブジェクト-->
  <symbol id="sym01">
    <polyline fill="none" stroke="#000000" stroke-width="2" points="1,10 1,1 10,1"/>
  </symbol>
  <!--ベースのオブジェクトを回転させて他3箇所を作る-->
  <symbol id="sym02">
    <use href="#sym01" x="0" y="-10" transform="rotate(90)" />
  </symbol>
  <symbol id="sym03">
    <use href="#sym01" x="-10" y="-10" transform="rotate(180)" />
  </symbol>
  <symbol id="sym04">
    <use href="#sym01" x="-10" y="0" transform="rotate(270)" />
  </symbol>
  <!--それぞれの位置に配置-->
  <!--左上-->
  <use href="#sym01" x="0" y="0" />
  <!--右上-->
  <use href="#sym02" x="100%" y="0" transform="translate(-10,0)" />
  <!--右下-->
  <use href="#sym03" x="100%" y="100%" transform="translate(-10,-10)" />
  <!--左下-->
  <use href="#sym04" x="0" y="100%" transform="translate(0,-10)" />
</svg>

CSS で通常の background にしたり、img や object をposition:absolute で背景にして使います。

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

/* 背景画像で表示する場合 */
.box {
  position: relative;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px 30px;
  border: 1px solid #ccc;
  width: calc(50% - 20px);
  background: url(frame.svg);
}

/* 画像やオブジェクトで背景に表示する場合 */
.box2 {
  position: relative;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px 30px;
  border: 1px solid #ccc;
  width: calc(50% - 20px);
}

.box2 object {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

1段目の直接背景に使うパターンはリサイズした時にボックスのサイズも変わるような場合レンダリング状況によって残像が残るので、img/objectタグや、埋め込み SVG にして position:absolute で背景にすると良いかもです。

<object type="image/svg+xml" data="frame.svg"></object>