FigmaでSVG Octocatを作る
SVGについての理解を深めるために、Figmaの図形ツールを駆使してOctocatを作ってみた。
Exportの際にSVGを指定するとSVGファイルとして出力できる。
円形と長方形を組み合わせて頭の部分を作ったが、単にグループ化するだけだとSVGのpathが結合されなかったので、「Union selection」で結合するようにした。
作ったSVGは↓
React/Next.jsから使う場合は↓のようにサイズを渡せるコンポーネントにしておくと再利用しやすい。
Octcat.tsx
import React from 'react'
const SIZE = 220
type Props = {
size?: number
}
export const Octocat = ({ size = 220 }: Props) => {
return (
<svg
width={size}
height={size}
fill="none"
viewBox={`0 0 ${SIZE} ${SIZE}`}
xmlns="http://www.w3.org/2000/svg"
>
<g id="Octocat">
<path
id="Head"
fillRule="evenodd"
clipRule="evenodd"
d="M43.3792 51.7987C60.1912 51.27 66.0966 55.7589 76.0438 63.3202L76.0462 63.322C76.4063 63.5958 76.7718 63.8736 77.1432 64.1553L76.8017 64.3944C86.0832 62.3829 97.1845 61.213 109.113 61.213C119.964 61.213 130.13 62.1811 138.865 63.8703C148.932 54.3985 157.291 53.1725 171.968 51.8624C177.039 65.4898 176.082 72.91 173.19 82.4547C181.769 90.6487 187.113 102.2 187.113 115V125.785C187.113 153.173 166.989 176.861 139.673 178.847C118.315 180.4 99.0247 180.378 77.6743 178.817C50.3089 176.815 30.1126 153.107 30.1126 125.668V115C30.1126 103.223 34.6368 92.5024 42.0421 84.4818C37.59 73.0407 39.464 65.1282 43.3792 51.7987Z"
fill="black"
/>
<path
id="Face"
d="M50.1126 141.626C50.1126 123.358 66.2943 109.555 84.5061 110.989C101.501 112.328 116.681 112.34 133.672 111.01C151.902 109.582 168.113 123.39 168.113 141.676V142.343C168.113 155.154 160.031 166.799 147.625 169.997C121.454 176.744 100.245 176.688 71.4255 169.7C58.6395 166.599 50.1126 154.783 50.1126 141.626V141.626Z"
fill="#F4CAB1"
/>
<g id="LeftEye">
<ellipse id="LeftEyeWhite" cx="77.1126" cy="140" rx="12" ry="18" fill="white" />
<ellipse id="LeftEyeColor" cx="77.6126" cy="140" rx="8.5" ry="12" fill="#AC5C51" />
</g>
<g id="RightEye">
<ellipse id="RightEyeWhite" cx="143.113" cy="140" rx="12" ry="18" fill="white" />
<ellipse id="RightEyeColor" cx="143.613" cy="140" rx="8.5" ry="12" fill="#AC5C51" />
</g>
<circle id="Nose" cx="109.613" cy="155.5" r="3.5" fill="#AC5C51" />
<path
id="Mouth"
d="M103.113 163C107.613 169 113.613 167.5 116.113 163"
stroke="#AC5C51"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
id="LeftBeard"
fillRule="evenodd"
clipRule="evenodd"
d="M-22.8505 149.996C-0.461796 146.766 12.112 146.117 34.604 146.5L34.621 145.5C12.0811 145.117 -0.546486 145.767 -22.9933 149.006L-22.8505 149.996ZM-21.7684 160.966C-10.0703 156.03 5.61571 154.433 37.0757 152.004L36.9987 151.007C5.6016 153.431 -10.2752 155.031 -22.1572 160.045L-21.7684 160.966Z"
fill="black"
/>
<path
id="RightBeard"
fillRule="evenodd"
clipRule="evenodd"
d="M181.133 146.001C210.462 146.724 226.764 147.143 242.054 149.993L242.237 149.01C226.851 146.142 210.457 145.723 181.158 145.001L181.133 146.001ZM177.151 152.004C213.057 154.115 229.103 155.853 243.007 160.974L243.353 160.035C229.285 154.855 213.085 153.115 177.21 151.005L177.151 152.004Z"
fill="black"
/>
</g>
</svg>
)
}