Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
md`# Using SVG File
外部のSVGを貼りつけるには、SVGの生コードをObservableに追加します。
Illustratorの場合
「別名で保存」→「SVG」→「SVGオプション」→「SVGコード…」3行目以降をコピーする。
[SVGOMG](https://jakearchibald.github.io/svgomg/)というWebアプリでSVGの最適化ができるようです。
ファイルを開いて、クリップボードボタンで簡単にコピーできます。
`
svg = {
const svg = DOM.svg(width, 400)
const g = d3.select(svg).append('g')
.attr('transform', 'translate(-300, -100)') // SVGの描画位置を指定する
g.node().appendChild(leaf) // SVGを追加する
// const groups = d3.select(svg).selectAll('g')
// .data(dataset)
// .enter()
// .append('g')
// .attr('transform', (d,i) => `translate(${i * 100}, 0)`)
// groups.nodes().forEach(function(g) {
// g.append(leaf)
// })
return svg
}
dataset = [ 5, 10, 15, 20, 25]
d3.select(leaf)
leaf = html`<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
<path d="M93.29,26.34v4.33c-1.66,0-2.92,0.42-3.78,1.27c-0.86,0.85-1.68,2.46-2.47,4.85l-0.7,2.19c-1.57,4.84-4.15,8.01-7.74,9.53
c3.32,0.64,5.97,2,7.93,4.09c1.97,2.08,2.95,4.55,2.95,7.41c0,3.99-1.5,7.29-4.5,9.9c-3,2.61-6.8,3.91-11.41,3.91
c-6.99,0-12.4-3-16.22-9.01l3.37-2.84c2.48,2.65,5.03,3.98,7.65,3.98c2.16,0,4.01-0.71,5.55-2.12c1.54-1.41,2.32-3.1,2.32-5.05
c0-1.63-0.6-3.05-1.81-4.24c-1.21-1.19-2.63-1.79-4.26-1.79c-2.94,0-7.07,2.08-12.37,6.25l-2.67,2.1
c-8.66,6.82-16.92,10.23-24.79,10.23c-6.82,0-12.6-2.24-17.33-6.73S5.9,54.64,5.9,48.2c0-6.53,2.45-11.8,7.34-15.82
s11.32-6.03,19.28-6.03h1.44v4.33c-4.72,0.32-8.47,1.96-11.23,4.92c-2.77,2.96-4.15,6.8-4.15,11.52c0,4.66,1.75,8.65,5.25,11.96
c3.5,3.31,7.72,4.96,12.68,4.96c4.78,0,9.03-1.46,12.76-4.37c3.73-2.91,5.6-6.24,5.6-9.97c0-1.78-0.58-3.28-1.73-4.5
c-1.15-1.22-2.57-1.84-4.26-1.84c-1.69,0-2.97,0.46-3.82,1.38c-0.86,0.92-1.29,2.31-1.29,4.17c0,1.14,0.32,2.48,0.96,4.02
l-3.93,1.79c-1.75-4.14-2.62-7.61-2.62-10.4c0-3.44,1.11-6.39,3.34-8.85c2.23-2.46,4.92-3.69,8.07-3.69c2.01,0,3.85,0.5,5.51,1.49
s3.15,2.49,4.46,4.5c1.69-4.23,4.36-7.18,8.02-8.87c3.66-1.69,9.2-2.54,16.63-2.54H93.29z M61.81,47.68
c4.28-0.82,8.2-4.39,11.76-10.71l0.74-1.27c1.54-2.74,3.41-4.53,5.6-5.38C68.78,30.32,62.74,36.11,61.81,47.68z"/>
</g>
</svg>
`
leaf2 = html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M93.29 26.34v4.33c-1.66 0-2.92.42-3.78 1.27-.86.85-1.68 2.46-2.47 4.85l-.7 2.19c-1.57 4.84-4.15 8.01-7.74 9.53 3.32.64 5.97 2 7.93 4.09 1.97 2.08 2.95 4.55 2.95 7.41 0 3.99-1.5 7.29-4.5 9.9-3 2.61-6.8 3.91-11.41 3.91-6.99 0-12.4-3-16.22-9.01l3.37-2.84c2.48 2.65 5.03 3.98 7.65 3.98 2.16 0 4.01-.71 5.55-2.12 1.54-1.41 2.32-3.1 2.32-5.05 0-1.63-.6-3.05-1.81-4.24-1.21-1.19-2.63-1.79-4.26-1.79-2.94 0-7.07 2.08-12.37 6.25l-2.67 2.1c-8.66 6.82-16.92 10.23-24.79 10.23-6.82 0-12.6-2.24-17.33-6.73S5.9 54.64 5.9 48.2c0-6.53 2.45-11.8 7.34-15.82s11.32-6.03 19.28-6.03h1.44v4.33c-4.72.32-8.47 1.96-11.23 4.92-2.77 2.96-4.15 6.8-4.15 11.52 0 4.66 1.75 8.65 5.25 11.96 3.5 3.31 7.72 4.96 12.68 4.96 4.78 0 9.03-1.46 12.76-4.37 3.73-2.91 5.6-6.24 5.6-9.97 0-1.78-.58-3.28-1.73-4.5-1.15-1.22-2.57-1.84-4.26-1.84s-2.97.46-3.82 1.38c-.86.92-1.29 2.31-1.29 4.17 0 1.14.32 2.48.96 4.02l-3.93 1.79c-1.75-4.14-2.62-7.61-2.62-10.4 0-3.44 1.11-6.39 3.34-8.85 2.23-2.46 4.92-3.69 8.07-3.69 2.01 0 3.85.5 5.51 1.49s3.15 2.49 4.46 4.5c1.69-4.23 4.36-7.18 8.02-8.87 3.66-1.69 9.2-2.54 16.63-2.54h9.08zM61.81 47.68c4.28-.82 8.2-4.39 11.76-10.71l.74-1.27c1.54-2.74 3.41-4.53 5.6-5.38-11.13 0-17.17 5.79-18.1 17.36z"/></svg>`
d3 = require('d3@5')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
