Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@TakesxiSximada

PugでSVGをインクルードする

More than 3 years have passed since last update.

includeを使ってSVGを埋め込み

includeを使ってSVGファイルをHTMLの内部に埋め込見ます。

example.pug
div: div: include cc.svg

pugコマンドでhtmlを生成します。--pretty は出力するHTMLを整形するオプションです。

HTMLを生成
node_modules/.bin/pug example.pug --pretty

このようなHTMLが出力されます。

<div>
  <div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="43" fill="none" stroke="#000" stroke-width="9"/>
  <path d="M50,42c-6-9-20-9,-25,0c-2,5-2,11,0,16c5,9,19,9,25,0l-6-3c-2,5-9,5-11,0c-1-1-1-9,0-10c2-5,9-4,11,0z"/>
  <path d="M78,42c-6-9-20-9,-25,0c-2,5-2,11,0,16c5,9,19,9,25,0l-6-3c-2,5-9,5-11,0c-1-1-1-9,0-10c2-5,9-4,11,0z"/>
</svg>

  </div>
</div>

サイズを指定してSVGを埋め込み

includeを使ってSVGファイルをHTMLの内部に埋め込見ます。

サイズ指定の出力
div: div(style="width: 30px"): include cc.svg

このようなHTMLが出力されます。

<div>
  <div style="width: 30px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="43" fill="none" stroke="#000" stroke-width="9"/>
  <path d="M50,42c-6-9-20-9,-25,0c-2,5-2,11,0,16c5,9,19,9,25,0l-6-3c-2,5-9,5-11,0c-1-1-1-9,0-10c2-5,9-4,11,0z"/>
  <path d="M78,42c-6-9-20-9,-25,0c-2,5-2,11,0,16c5,9,19,9,25,0l-6-3c-2,5-9,5-11,0c-1-1-1-9,0-10c2-5,9-4,11,0z"/>
</svg>

  </div>
</div>

div タグのスタイルが指定されています。div でなくてもブロック要素であれば大丈夫です。

CSSでサイズを指定してSVGを埋め込み

埋め込んだSVGのサイズはCSSでも指定できます。

example.pug
link(href="example.css" type="text/css" rel="stylesheet")
div: div.include_svg: include cc.svg

example.css
.include_svg {
    width: 30px;
}

このようなHTMLが出力されます。

<link href="example.css" type="text/css" rel="stylesheet"/>
<div>
  <div class="include_svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="43" fill="none" stroke="#000" stroke-width="9"/>
  <path d="M50,42c-6-9-20-9,-25,0c-2,5-2,11,0,16c5,9,19,9,25,0l-6-3c-2,5-9,5-11,0c-1-1-1-9,0-10c2-5,9-4,11,0z"/>
  <path d="M78,42c-6-9-20-9,-25,0c-2,5-2,11,0,16c5,9,19,9,25,0l-6-3c-2,5-9,5-11,0c-1-1-1-9,0-10c2-5,9-4,11,0z"/>
</svg>

  </div>
</div>

CSSで指定されているのでそのサイズが使われます。

あとがき

使用したpackage.jsonを載せておきます。

{
  "name": "include-svg",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "pug": "^2.0.0-beta7",
    "pug-cli": "^1.0.0-alpha6"
  }
}

Qiita記事には埋め込みSVGが使えないようでした。

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?