SVG を XML ソース内に直接埋め込む。
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 64px; height: 64px; opacity: 1;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4B4B4B;}
</style>
<g>
<path class="st0" d="M205.116,153.078c31.534,11.546,69.397-12.726,84.58-54.209c15.174-41.484,1.915-84.462-29.614-96.001
c-31.541-11.53-69.4,12.735-84.582,54.218C160.325,98.57,173.584,141.548,205.116,153.078z" style="fill: rgb(75, 75, 75);"></path>
<path class="st0" d="M85.296,219.239c32.987-2.86,56.678-40.344,52.929-83.75c-3.757-43.391-33.545-76.253-66.532-73.409
c-32.984,2.869-56.674,40.36-52.921,83.759C22.53,189.23,52.313,222.091,85.296,219.239z" style="fill: rgb(75, 75, 75);"></path>
<path class="st0" d="M342.196,217.768c28.952,17.017,70.552-0.073,92.926-38.154c22.374-38.106,17.041-82.758-11.915-99.774
c-28.951-17.001-70.56,0.097-92.93,38.178C307.905,156.117,313.245,200.768,342.196,217.768z" style="fill: rgb(75, 75, 75);"></path>
<path class="st0" d="M497.259,262.912c-18.771-27.271-63.07-29.379-98.954-4.694c-35.892,24.701-49.762,66.822-30.996,94.101
c18.766,27.27,63.069,29.38,98.954,4.686C502.143,332.312,516.021,290.191,497.259,262.912z" style="fill: rgb(75, 75, 75);"></path>
<path class="st0" d="M304.511,268.059c-3.58-24.773-18.766-47.366-43.039-58.824c-24.268-11.45-51.365-8.807-72.758,4.169
c-23.646,14.35-38.772,33.096-59.138,41.29c-20.363,8.193-77.4-16.209-112.912,48.278c-25.081,45.548-2.057,103.128,44.962,125.315
c35.738,16.864,64.023,14.981,84.788,24.774c20.762,9.793,37.29,32.83,73.025,49.692c47.018,22.188,106.1,3.362,125.315-44.957
c27.206-68.407-27.897-96.922-34.522-117.85C303.613,319.021,308.47,295.426,304.511,268.059z" style="fill: rgb(75, 75, 75);"></path>
</g>
</svg>
結果
SVGファイルの内容が長いので、そのまま入れ込んでしまうと可読性が悪くなってしまう
object要素でSVGファイルを参照する
<object data="/logo/肉球のアイコン.svg" type="image/svg+xml"></object>
結果
iframe要素を使う
<iframe src="image.svg"></iframe>
結果
iframeの枠組みが表示されてしまったので, border: none;やborder-sytle: none;等で枠組みを消す必要がある。
img要素を使う
<img src="/logo/dog.svg"/>
結果
上の画像をクリック拡大すると、SVGはベクター形式なので拡大してもギザギザならないメリットを確認できます。
cssで背景に指定する
#dog_wrapper {
background-image: url(/logo/dog.svg);
background-repeat: no-repeat;
}