FigmaでSVG Octocatを作る その3
FigmaでSVG Octocatを作る その2で完成したつもりだったが容量削減について調べていたところ、アウトライン化したほうが良いという記事を見かけたのでアウトライン化してからSVG書き出しを行うように変更した。
表示内容はその2の時と変わっていないが、SVGファイルのサイズは16KB => 6.5KBと半分以下になった。
アウトライン化大事。
Octocat.tsx
import React from 'react'
const SIZE = 280
type Props = {
size?: number
}
export const Octocat = ({ size = 560 }: Props) => {
return (
<svg
width={size}
height={size}
fill="none"
viewBox={`0 0 ${SIZE} ${SIZE}`}
xmlns="http://www.w3.org/2000/svg"
>
<g id="OctocatOutline">
<path
id="Body"
fillRule="evenodd"
clipRule="evenodd"
d="M106.037 49.5636C96.0899 42.0023 90.1845 37.5133 73.3725 38.0421C69.4573 51.3716 67.5833 59.284 72.0354 70.7252C64.6301 78.7458 60.1059 89.4662 60.1059 101.243V111.912C60.1059 118.854 61.3985 125.556 63.7729 131.73C41.7569 131.377 29.166 132.051 7 135.25L7.14281 136.239C29.3898 133.029 41.9458 132.369 64.1716 132.736C64.8074 134.296 65.5129 135.821 66.2846 137.305C35.3558 139.699 19.6286 141.313 7.83612 146.288L8.22488 147.21C19.8893 142.288 35.5188 140.685 66.7978 138.269C74.9133 153.139 89.7545 163.75 107.668 165.06C112.363 165.403 116.958 165.672 121.498 165.867C114.608 167.621 109.53 173.724 109.039 181H109L108.985 181.664C101.605 183.957 86.4693 186.423 81 179C80.427 178.222 79.8641 177.445 79.3057 176.673C73.0426 168.022 67.354 160.164 54.5 162C53.8333 162.667 53.7 164.8 58.5 168C62 170.167 69 178 72 186.5C73.6876 191.282 83.7577 201.749 108.601 198.136L108.006 223.722C107.303 225.458 106.221 227.644 105.031 228.759C103.383 230.303 100.567 231.655 99.3652 232.138C98.335 233.103 96.8927 235.228 99.3652 236C106.783 236 110.011 235.356 110.698 235.035C113.946 234.273 120.266 230.892 120.941 223.339C120.979 223.233 121 223.119 121 223V222V190.16L121.685 187.53C121.811 187.047 122.021 186.59 122.305 186.181C122.837 185.415 123.606 184.846 124.494 184.562L125 184.4V224C123.5 232.5 121 237.5 119 237.5C118.333 238.833 117.7 241.5 120.5 241.5C124 241.5 126.5 241 128 240C128.192 239.872 128.475 239.735 128.825 239.567C131.204 238.418 136.692 235.77 138 224V182.5H142V224C142.5 230.167 146.8 242.3 160 241.5C162.4 240.7 161 237.833 160 236.5C158.167 234.667 154.6 229.6 155 224V184C156.333 185.167 159 188.5 159 192.5V224V225H159.111C159.782 228.339 163.497 234.189 170 235.575C172.673 235.896 179.249 236.344 180.051 235.575C182 233.706 181.555 232.961 180.051 232L180.041 231.994C178.524 231.024 172.998 227.491 172 223L171.954 223.004L171 180.977L170.963 180.978C170.483 173.617 165.307 167.444 158.299 165.777C162.037 165.599 165.818 165.37 169.666 165.091C187.508 163.793 202.281 153.238 210.383 138.44C244.029 140.468 259.521 142.253 273.001 147.217L273.346 146.279C259.771 141.28 244.211 139.485 210.901 137.469C211.775 135.795 212.563 134.068 213.263 132.297C241.255 132.989 257.132 133.456 272.047 136.236L272.23 135.253C257.286 132.467 241.391 131.993 213.643 131.306C215.887 125.283 217.106 118.768 217.106 112.028V101.243C217.106 88.4436 211.762 76.8921 203.183 68.6981C206.076 59.1534 207.033 51.7331 201.961 38.1058C187.284 39.4159 178.925 40.6419 168.859 50.1137C160.124 48.4245 149.957 47.4563 139.106 47.4563C127.178 47.4563 116.076 48.6262 106.795 50.6378L107.137 50.3987C106.764 50.1163 106.398 49.8379 106.037 49.5636Z"
fill="black"
/>
<path
id="Dot"
fillRule="evenodd"
clipRule="evenodd"
d="M61.5 165C62.6046 165 63.5 164.328 63.5 163.5C63.5 162.672 62.6046 162 61.5 162C60.3954 162 59.5 162.672 59.5 163.5C59.5 164.328 60.3954 165 61.5 165ZM69.5 167C69.5 167.828 68.6046 168.5 67.5 168.5C66.3954 168.5 65.5 167.828 65.5 167C65.5 166.172 66.3954 165.5 67.5 165.5C68.6046 165.5 69.5 166.172 69.5 167ZM71 172.5C72.1046 172.5 73 171.828 73 171C73 170.172 72.1046 169.5 71 169.5C69.8954 169.5 69 170.172 69 171C69 171.828 69.8954 172.5 71 172.5ZM76.5 176C76.5 176.828 75.6046 177.5 74.5 177.5C73.3954 177.5 72.5 176.828 72.5 176C72.5 175.172 73.3954 174.5 74.5 174.5C75.6046 174.5 76.5 175.172 76.5 176ZM78 182C79.1046 182 80 181.328 80 180.5C80 179.672 79.1046 179 78 179C76.8954 179 76 179.672 76 180.5C76 181.328 76.8954 182 78 182ZM85 184.5C85 185.328 84.1046 186 83 186C81.8954 186 81 185.328 81 184.5C81 183.672 81.8954 183 83 183C84.1046 183 85 183.672 85 184.5ZM106 186.5C106 187.328 105.105 188 104 188C102.895 188 102 187.328 102 186.5C102 185.672 102.895 185 104 185C105.105 185 106 185.672 106 186.5ZM99 187.5C99 188.328 98.1046 189 97 189C95.8954 189 95 188.328 95 187.5C95 186.672 95.8954 186 97 186C98.1046 186 99 186.672 99 187.5ZM90 189C91.1046 189 92 188.328 92 187.5C92 186.672 91.1046 186 90 186C88.8954 186 88 186.672 88 187.5C88 188.328 88.8954 189 90 189Z"
fill="#C3E3D7"
/>
<path
id="Drops"
d="M55.8417 168.631C53.9551 171.964 51.9486 179.131 55.8417 179.131C59.5 179.131 57.7282 171.964 55.8417 168.631Z"
fill="#9CDAF0"
/>
<path
id="Face"
d="M80.1059 127.869C80.1059 109.601 96.2876 95.7986 114.499 97.2327C131.494 98.571 146.674 98.5833 163.665 97.253C181.896 95.8258 198.106 109.633 198.106 127.919V128.586C198.106 141.397 190.024 153.042 177.619 156.24C151.447 162.987 130.238 162.931 101.419 155.943C88.6328 152.843 80.1059 141.026 80.1059 127.869V127.869Z"
fill="#F4CAB1"
/>
<g id="LeftEye">
<path
id="LeftEyeWhite"
d="M119.106 126.243C119.106 136.184 113.733 144.243 107.106 144.243C100.478 144.243 95.1059 136.184 95.1059 126.243C95.1059 116.302 100.478 108.243 107.106 108.243C113.733 108.243 119.106 116.302 119.106 126.243Z"
fill="white"
/>
<path
id="LeftEyeColor"
d="M116.106 126.243C116.106 132.871 112.3 138.243 107.606 138.243C102.911 138.243 99.1059 132.871 99.1059 126.243C99.1059 119.616 102.911 114.243 107.606 114.243C112.3 114.243 116.106 119.616 116.106 126.243Z"
fill="#AC5C51"
/>
</g>
<g id="RightEye">
<path
id="RightEyeWhite"
d="M185.106 126.243C185.106 136.184 179.733 144.243 173.106 144.243C166.479 144.243 161.106 136.184 161.106 126.243C161.106 116.302 166.479 108.243 173.106 108.243C179.733 108.243 185.106 116.302 185.106 126.243Z"
fill="white"
/>
<path
id="RightEyeColor"
d="M182.106 126.243C182.106 132.871 178.3 138.243 173.606 138.243C168.912 138.243 165.106 132.871 165.106 126.243C165.106 119.616 168.912 114.243 173.606 114.243C178.3 114.243 182.106 119.616 182.106 126.243Z"
fill="#AC5C51"
/>
</g>
<path
id="Nose"
d="M143.106 141.743C143.106 143.676 141.539 145.243 139.606 145.243C137.673 145.243 136.106 143.676 136.106 141.743C136.106 139.81 137.673 138.243 139.606 138.243C141.539 138.243 143.106 139.81 143.106 141.743Z"
fill="#AC5C51"
/>
<path
id="Mouth (Stroke)"
fillRule="evenodd"
clipRule="evenodd"
d="M146.592 148.369C147.074 148.637 147.248 149.246 146.98 149.729C145.592 152.227 143.192 153.96 140.435 154.178C137.647 154.398 134.714 153.055 132.306 149.843C131.975 149.402 132.064 148.775 132.506 148.443C132.948 148.112 133.575 148.202 133.906 148.643C135.998 151.432 138.316 152.339 140.277 152.184C142.27 152.027 144.12 150.76 145.232 148.758C145.5 148.275 146.109 148.101 146.592 148.369Z"
fill="#AC5C51"
/>
</g>
</svg>
)
}