SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18\" \/>\n<meta property=\"og:description\" content=\"SVG\u30bf\u30b0\u89e3\u8aac CSS\u3068JavaScript\u306b\u3088\u308b\u57fa\u672c\u56f3\u5f62\u64cd\u4f5c \u76ee\u6b21 1. \u306f\u3058\u3081\u306b (Introduction) 2. SVG\u306e\u57fa\u672c\u69cb\u9020 (Basic SVG Structure) 3. SVG\u57fa\u672c\u56f3\u5f62\u30bf\u30b0 (Basi […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563\" \/>\n<meta property=\"og:site_name\" content=\"\u306e\u3093\u304d\u306e\u65e5\u8a18\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1004\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"5\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563\",\"url\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563\",\"name\":\"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#website\"},\"datePublished\":\"2025-06-14T00:54:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG\u30bf\u30b0\u89e3\u8aac\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#website\",\"url\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/\",\"name\":\"\u306e\u3093\u304d\u306e\u65e5\u8a18\",\"description\":\"\u65e5\u5e38\u3067\u3001\u601d\u3063\u305f\u4e8b\u3001\u611f\u3058\u305f\u4e8b\u3092\u8a18\u9332\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#\\\/schema\\\/person\\\/a54ab33d75d0ea64f384d5277bd56ad7\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#\\\/schema\\\/person\\\/a54ab33d75d0ea64f384d5277bd56ad7\",\"name\":\"cbs@nonki\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\",\"url\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\",\"contentUrl\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\",\"width\":1004,\"height\":1024,\"caption\":\"cbs@nonki\"},\"logo\":{\"@id\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\"}}]}<\/script>\n","yoast_head_json":{"title":"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","og_locale":"ja_JP","og_type":"article","og_title":"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18","og_description":"SVG\u30bf\u30b0\u89e3\u8aac CSS\u3068JavaScript\u306b\u3088\u308b\u57fa\u672c\u56f3\u5f62\u64cd\u4f5c \u76ee\u6b21 1. \u306f\u3058\u3081\u306b (Introduction) 2. SVG\u306e\u57fa\u672c\u69cb\u9020 (Basic SVG Structure) 3. SVG\u57fa\u672c\u56f3\u5f62\u30bf\u30b0 (Basi […]","og_url":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","og_site_name":"\u306e\u3093\u304d\u306e\u65e5\u8a18","og_image":[{"url":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","width":1004,"height":1024,"type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"5\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","url":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","name":"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18","isPartOf":{"@id":"https:\/\/www.nonki.coffeebittersweet.net\/#website"},"datePublished":"2025-06-14T00:54:09+00:00","breadcrumb":{"@id":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/www.nonki.coffeebittersweet.net\/"},{"@type":"ListItem","position":2,"name":"SVG\u30bf\u30b0\u89e3\u8aac"}]},{"@type":"WebSite","@id":"https:\/\/www.nonki.coffeebittersweet.net\/#website","url":"https:\/\/www.nonki.coffeebittersweet.net\/","name":"\u306e\u3093\u304d\u306e\u65e5\u8a18","description":"\u65e5\u5e38\u3067\u3001\u601d\u3063\u305f\u4e8b\u3001\u611f\u3058\u305f\u4e8b\u3092\u8a18\u9332\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002","publisher":{"@id":"https:\/\/www.nonki.coffeebittersweet.net\/#\/schema\/person\/a54ab33d75d0ea64f384d5277bd56ad7"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nonki.coffeebittersweet.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":["Person","Organization"],"@id":"https:\/\/www.nonki.coffeebittersweet.net\/#\/schema\/person\/a54ab33d75d0ea64f384d5277bd56ad7","name":"cbs@nonki","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","url":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","contentUrl":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","width":1004,"height":1024,"caption":"cbs@nonki"},"logo":{"@id":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png"}}]}},"_links":{"self":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages\/1563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1563"}],"version-history":[{"count":1,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages\/1563\/revisions"}],"predecessor-version":[{"id":1564,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages\/1563\/revisions\/1564"}],"wp:attachment":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

1. \u306f\u3058\u3081\u306b (Introduction)<\/h2>\n

SVG\u3068\u306f\u4f55\u304b\uff1aXML\u30d9\u30fc\u30b9\u306e\u30d9\u30af\u30bf\u30fc\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u8a00\u8a9e<\/h3>\n
SVG\uff08Scalable Vector Graphics\uff09\u306f\u3001W3C\uff08World Wide Web Consortium\uff09\u306b\u3088\u3063\u3066\u958b\u767a\u30fb\u7dad\u6301\u3055\u308c\u3066\u3044\u308b\u3001XML\u306b\u57fa\u3065\u3044\u305f\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u8a00\u8a9e\u3067\u3059\u3002\u4e3b\u306b\u4e8c\u6b21\u5143\u30d9\u30af\u30bf\u30fc\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3092\u8a18\u8ff0\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002HTML\u304c\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u69cb\u9020\u5316\u306b\u7528\u3044\u3089\u308c\u308b\u306e\u306b\u5bfe\u3057\u3001SVG\u306f\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3001\u3064\u307e\u308a\u56f3\u5f62\u3001\u7dda\u3001\u30c6\u30ad\u30b9\u30c8\u306a\u3069\u306e\u8996\u899a\u7684\u8981\u7d20\u3092\u69cb\u9020\u5316\u3059\u308b\u305f\u3081\u306e\u8a00\u8a9e\u3068\u4f4d\u7f6e\u3065\u3051\u3089\u308c\u307e\u3059\u3002<\/p>\n
SVG\u306e\u6700\u5927\u306e\u7279\u5fb4\u306e\u4e00\u3064\u306f\u3001\u30d9\u30af\u30bf\u30fc\u5f62\u5f0f\u3067\u3042\u308b\u3053\u3068\u3067\u3059\u3002\u3053\u308c\u306f\u3001\u753b\u50cf\u3092\u30d4\u30af\u30bb\u30eb\u306e\u96c6\u307e\u308a\u3068\u3057\u3066\u8868\u73fe\u3059\u308b\u30d3\u30c3\u30c8\u30de\u30c3\u30d7\u5f62\u5f0f\uff08JPEG\u3001PNG\u3001GIF\u306a\u3069\uff09\u3068\u306f\u7570\u306a\u308a\u3001\u70b9\u3001\u7dda\u3001\u66f2\u7dda\u3068\u3044\u3063\u305f\u6570\u5b66\u7684\u306a\u8a18\u8ff0\u306b\u57fa\u3065\u3044\u3066\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3092\u63cf\u753b\u3057\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u753b\u50cf\u3092\u3069\u308c\u3060\u3051\u62e1\u5927\u30fb\u7e2e\u5c0f\u3057\u3066\u3082\u3001\u753b\u8cea\u304c\u52a3\u5316\u3057\u305f\u308a\u3001\u3044\u308f\u3086\u308b\u300c\u30b8\u30e3\u30ae\u30fc\u300d\uff08\u30ae\u30b6\u30ae\u30b6\u3057\u305f\u7dda\uff09\u304c\u73fe\u308c\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u308c\u306f\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3084\u9ad8\u89e3\u50cf\u5ea6\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\uff08Retina\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306a\u3069\uff09\u304c\u666e\u53ca\u3057\u305f\u73fe\u4ee3\u306e\u30a6\u30a7\u30d6\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u975e\u5e38\u306b\u91cd\u8981\u306a\u5229\u70b9\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
W3C\u3068\u3044\u3046\u6a19\u6e96\u5316\u56e3\u4f53\u306b\u3088\u3063\u3066\u7b56\u5b9a\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001SVG\u306f\u7279\u5b9a\u306e\u30d9\u30f3\u30c0\u30fc\u306b\u4f9d\u5b58\u3057\u306a\u3044\u30aa\u30fc\u30d7\u30f3\u306a\u6a19\u6e96\u6280\u8853\u3067\u3042\u308a\u3001\u4e3b\u8981\u306a\u30e2\u30c0\u30f3\u30d6\u30e9\u30a6\u30b6\u3067\u5e83\u304f\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n

SVG\u306e\u4e3b\u306a\u5229\u70b9\uff1a\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u3001\u30c6\u30ad\u30b9\u30c8\u30d9\u30fc\u30b9\u3001DOM\u64cd\u4f5c\u53ef\u80fd\u6027<\/h3>\n

SVG\u306f\u30a6\u30a7\u30d6\u958b\u767a\u306b\u304a\u3044\u3066\u591a\u304f\u306e\u5229\u70b9\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n

\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3:<\/strong> \u524d\u8ff0\u306e\u901a\u308a\u3001\u30d9\u30af\u30bf\u30fc\u5f62\u5f0f\u3067\u3042\u308b\u305f\u3081\u3001\u3069\u306e\u3088\u3046\u306a\u30b5\u30a4\u30ba\u306b\u5909\u66f4\u3057\u3066\u3082\u9bae\u660e\u306a\u8868\u793a\u54c1\u8cea\u3092\u7dad\u6301\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u4e00\u5ea6\u4f5c\u6210\u3057\u305f\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3092\u69d8\u3005\u306a\u30c7\u30d0\u30a4\u30b9\u3084\u89e3\u50cf\u5ea6\u3067\u518d\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n
\u30c6\u30ad\u30b9\u30c8\u30d9\u30fc\u30b9:<\/strong> SVG\u30d5\u30a1\u30a4\u30eb\u306e\u5b9f\u4f53\u306fXML\u5f62\u5f0f\u306e\u30c6\u30ad\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002\u3053\u308c\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u76f4\u63a5\u7de8\u96c6\u3067\u304d\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u691c\u7d22\u30a8\u30f3\u30b8\u30f3\u306b\u3088\u308b\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u5316\u304c\u53ef\u80fd\u3067\u3042\u308a\u3001Gzip\u306a\u3069\u3067\u52b9\u7387\u7684\u306b\u5727\u7e2e\u3067\u304d\u308b\u3068\u3044\u3046\u5229\u70b9\u3082\u3082\u305f\u3089\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u6bd4\u8f03\u7684\u8efd\u91cf\u306b\u306a\u308b\u50be\u5411\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n
DOM\u64cd\u4f5c\u53ef\u80fd\u6027:<\/strong> SVG\u8981\u7d20\u306f\u3001HTML\u8981\u7d20\u3068\u540c\u69d8\u306b\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u3088\u3063\u3066DOM\uff08Document Object Model\uff09\u30c4\u30ea\u30fc\u306e\u4e00\u90e8\u3068\u3057\u3066\u89e3\u91c8\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u306f\u3001JavaScript\u3092\u7528\u3044\u3066SVG\u8981\u7d20\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001\u305d\u306e\u5c5e\u6027\u3084\u30b9\u30bf\u30a4\u30eb\u3092\u52d5\u7684\u306b\u5909\u66f4\u3057\u305f\u308a\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u305f\u308a\u3067\u304d\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002\u3053\u306e\u7279\u6027\u304c\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30c7\u30fc\u30bf\u30d3\u30b8\u30e5\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3\u3084\u52d5\u7684\u306a\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u8868\u73fe\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306e\u9375\u3068\u306a\u308a\u307e\u3059\u3002<\/li>\n
CSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0:<\/strong> SVG\u8981\u7d20\u306e\u898b\u305f\u76ee\uff08\u8272\u3001\u7dda\u306e\u592a\u3055\u3001\u4e0d\u900f\u660e\u5ea6\u306a\u3069\uff09\u306f\u3001CSS\u3092\u4f7f\u7528\u3057\u3066\u67d4\u8edf\u306b\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u5168\u4f53\u306e\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3068\u306e\u4e00\u8cab\u6027\u3092\u4fdd\u3061\u3084\u3059\u304f\u306a\u308a\u3001:hover<\/code>\u306a\u3069\u306e\u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u7528\u3044\u305f\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u3082\u5bb9\u6613\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/li>\n

\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3:<\/strong> SVG\u5185\u306e\u30c6\u30ad\u30b9\u30c8\u8981\u7d20\u306f\u30c6\u30ad\u30b9\u30c8\u3068\u3057\u3066\u8a8d\u8b58\u3055\u308c\u308b\u305f\u3081\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u306a\u3069\u3067\u8aad\u307f\u4e0a\u3052\u53ef\u80fd\u3067\u3059\u3002\u307e\u305f\u3001<title><\/code>\u8981\u7d20\u3084<desc><\/code>\u8981\u7d20\u3001WAI-ARIA\u5c5e\u6027\u3092\u7528\u3044\u308b\u3053\u3068\u3067\u3001\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u306e\u5185\u5bb9\u306b\u95a2\u3059\u308b\u4ee3\u66ff\u60c5\u5831\u3092\u63d0\u4f9b\u3057\u3001\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n <\/ul>\n SVG\u306f\u305d\u306e\u5229\u7528\u65b9\u6cd5\u306b\u3088\u3063\u3066\u3001\u305d\u306e\u6027\u8cea\u304c\u5927\u304d\u304f\u5909\u308f\u308b\u3068\u3044\u3046\u4e8c\u9762\u6027\u3092\u6301\u3063\u3066\u3044\u307e\u3059\u3002\u4e00\u3064\u306f\u3001JPEG\u3084PNG\u306e\u3088\u3046\u306b\u3001<img><\/code>\u30bf\u30b0\u306esrc<\/code>\u5c5e\u6027\u3084CSS\u306ebackground-image<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u53c2\u7167\u3055\u308c\u308b\u300c\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u300d\u3068\u3057\u3066\u306e\u5074\u9762\u3067\u3059\u3002\u3053\u306e\u5834\u5408\u3001SVG\u306f\u57fa\u672c\u7684\u306b\u9759\u7684\u306a\u753b\u50cf\u3068\u3057\u3066\u6271\u308f\u308c\u3001\u5916\u90e8\u306eCSS\u3084JavaScript\u304b\u3089\u5185\u90e8\u306e\u8981\u7d20\u3092\u76f4\u63a5\u64cd\u4f5c\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n \u3082\u3046\u4e00\u3064\u306f\u3001HTML\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5185\u306b<svg><\/code>\u30bf\u30b0\u3068\u305d\u306e\u5185\u5bb9\u3092\u76f4\u63a5\u8a18\u8ff0\u3059\u308b\u300c\u30a4\u30f3\u30e9\u30a4\u30f3SVG\u300d\u3068\u3057\u3066\u306e\u5074\u9762\u3067\u3059\u3002\u3053\u306e\u5834\u5408\u3001SVG\u8981\u7d20\u306fHTML\u306eDOM\u306e\u4e00\u90e8\u3068\u306a\u308a\u3001\u524d\u8ff0\u306eDOM\u64cd\u4f5c\u53ef\u80fd\u6027\u3084CSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3068\u3044\u3063\u305f\u5229\u70b9\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n <\/section>\n\n \n 2. SVG\u306e\u57fa\u672c\u69cb\u9020 (Basic SVG Structure)<\/h2>\n <svg><\/code>\u8981\u7d20\uff1a\u30eb\u30fc\u30c8\u8981\u7d20\u3001\u57fa\u672c\u7684\u306a\u5c5e\u6027 (width<\/code>, height<\/code>, viewBox<\/code>) \u306e\u89e3\u8aac<\/h3>\n SVG\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4f5c\u6210\u3059\u308b\u969b\u306e\u57fa\u672c\u3068\u306a\u308b\u306e\u304c<svg><\/code>\u8981\u7d20\u3067\u3059\u3002\u3053\u308c\u306fSVG\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u30eb\u30fc\u30c8\uff08\u6839\uff09\u8981\u7d20\u3001\u3042\u308b\u3044\u306f\u30b3\u30f3\u30c6\u30ca\u3068\u3057\u3066\u6a5f\u80fd\u3057\u3001\u5185\u90e8\u306b\u8a18\u8ff0\u3055\u308c\u308b\u69d8\u3005\u306a\u56f3\u5f62\u8981\u7d20\uff08<rect><\/code>, <circle><\/code>\u306a\u3069\uff09\u3084\u30b0\u30eb\u30fc\u30d7\u8981\u7d20\uff08<g><\/code>\uff09\u3092\u5305\u542b\u3057\u307e\u3059\u3002<\/p>\n <svg><\/code>\u8981\u7d20\u306b\u306f\u3001\u305d\u306e\u8868\u793a\u9818\u57df\u3084\u5185\u90e8\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30de\u30c3\u30d4\u30f3\u30b0\u65b9\u6cd5\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u5c5e\u6027\u304c\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u3002<\/p>\n \n width<\/code>\u5c5e\u6027\u3068height<\/code>\u5c5e\u6027:<\/strong> \u3053\u308c\u3089\u306f\u3001SVG\u304c\u8868\u793a\u3055\u308c\u308b\u7269\u7406\u7684\u306a\u9818\u57df\u306e\u5e45\u3068\u9ad8\u3055<\/strong>\u3001\u3064\u307e\u308a\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\uff08\u8868\u793a\u9818\u57df\uff09\u306e\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u5024\u306f\u30d4\u30af\u30bb\u30eb (px<\/code>)\u3001em<\/code>\u3001\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8 (%<\/code>) \u306a\u3069\u306eCSS\u3067\u6709\u52b9\u306a\u9577\u3055\u306e\u5358\u4f4d\u3067\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002\u5358\u4f4d\u3092\u7701\u7565\u3057\u305f\u5834\u5408\u306f\u3001\u901a\u5e38\u30d4\u30af\u30bb\u30eb\u3068\u3057\u3066\u89e3\u91c8\u3055\u308c\u307e\u3059\u3002<\/li>\n viewBox<\/code>\u5c5e\u6027:<\/strong> \u3053\u306e\u5c5e\u6027\u306f\u3001SVG\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u3069\u306e\u90e8\u5206\u3092\u3001\u3069\u306e\u3088\u3046\u306b\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306b\u8868\u793a\u3059\u308b\u304b\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u5024\u306f\u30b9\u30da\u30fc\u30b9\u307e\u305f\u306f\u30ab\u30f3\u30de\u3067\u533a\u5207\u3089\u308c\u305f4\u3064\u306e\u6570\u5024 min-x min-y width height<\/code> \u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002<\/li>\n xmlns<\/code>\u5c5e\u6027:<\/strong> SVG\u306fXML\u30d9\u30fc\u30b9\u306e\u8a00\u8a9e\u3067\u3042\u308b\u305f\u3081\u3001SVG\u8981\u7d20\u304cSVG\u306e\u540d\u524d\u7a7a\u9593 (http:\/\/www.w3.org\/2000\/svg<\/code>) \u306b\u5c5e\u3059\u308b\u3053\u3068\u3092\u793a\u3059\u305f\u3081\u306bxmlns<\/code>\u5c5e\u6027\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u63a8\u5968\u3055\u308c\u307e\u3059\u3002<\/li>\n <\/ul>\n SVG\u5ea7\u6a19\u7cfb\u3068viewBox<\/code>\u306e\u95a2\u4fc2\u6027<\/h3>\n SVG\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u306f\u3001\u72ec\u81ea\u306e\u5ea7\u6a19\u7cfb\uff08\u30e6\u30fc\u30b6\u30fc\u5ea7\u6a19\u7cfb\uff09\u5185\u3067\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002\u901a\u5e38\u3001\u3053\u306e\u5ea7\u6a19\u7cfb\u306e\u539f\u70b9(0,0)\u306f\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u5de6\u4e0a\u9685\u306b\u4f4d\u7f6e\u3057\u3001X\u8ef8\u306f\u53f3\u65b9\u5411\u3001Y\u8ef8\u306f\u4e0b\u65b9\u5411\u304c\u6b63\u306e\u5024\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n viewBox<\/code>\u5c5e\u6027\u306f\u3001\u3053\u306e\u30e6\u30fc\u30b6\u30fc\u5ea7\u6a19\u7cfb\u306e\u3069\u306e\u9818\u57df\u3092<svg><\/code>\u8981\u7d20\u306ewidth<\/code>\u5c5e\u6027\u3068height<\/code>\u5c5e\u6027\u3067\u5b9a\u7fa9\u3055\u308c\u305f\u7269\u7406\u7684\u306a\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306b\u30de\u30c3\u30d4\u30f3\u30b0\u3059\u308b\u304b\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001<svg width=\"200\" height=\"100\" viewBox=\"0 0 50 50\"><\/code> \u3068\u6307\u5b9a\u3057\u305f\u5834\u5408\u3001\u30e6\u30fc\u30b6\u30fc\u5ea7\u6a19\u7cfb\u306e(0,0)\u304b\u3089(50,50)\u307e\u3067\u306e\u7bc4\u56f2\u304c\u3001\u5e45200px\u3001\u9ad8\u3055100px\u306e\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5168\u4f53\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u62e1\u5927\u30fb\u7e2e\u5c0f\u3055\u308c\u307e\u3059\u3002<\/p>\n viewBox<\/code>\u5c5e\u6027\u3068preserveAspectRatio<\/code>\u5c5e\u6027\u3092\u7406\u89e3\u3057\u3001\u9069\u5207\u306b\u4f7f\u7528\u3059\u308b\u3053\u3068\u306f\u3001SVG\u3092\u610f\u56f3\u3057\u305f\u901a\u308a\u306b\u8868\u793a\u3055\u305b\u3001\u7279\u306b\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306b\u5bfe\u5fdc\u3055\u305b\u308b\u4e0a\u3067\u975e\u5e38\u306b\u91cd\u8981\u3067\u3059\u3002<\/p>\n <\/section>\n\n \n 3. SVG\u57fa\u672c\u56f3\u5f62\u30bf\u30b0 (Basic SVG Shape Tags)<\/h2>\n SVG\u306b\u306f\u3001\u57fa\u672c\u7684\u306a\u5e7e\u4f55\u5b66\u7684\u5f62\u72b6\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306e\u5c02\u7528\u30bf\u30b0\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3089\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u8907\u96d1\u306a\u30d1\u30b9\u30c7\u30fc\u30bf\u3092\u8a18\u8ff0\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u4e00\u822c\u7684\u306a\u56f3\u5f62\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n <rect><\/code> (\u9577\u65b9\u5f62)<\/h3>\n <rect><\/code>\u8981\u7d20\u306f\u3001\u9577\u65b9\u5f62\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n <svg width=\"220\" height=\"100\" viewBox=\"0 0 220 100\">\n <rect x=\"10\" y=\"10\" width=\"100\" height=\"80\" fill=\"lightblue\" stroke=\"black\" \/>\n <rect x=\"120\" y=\"10\" width=\"90\" height=\"80\" rx=\"15\" ry=\"10\" fill=\"lightgreen\" stroke=\"darkgreen\" stroke-width=\"2\"\/>\n<\/svg><\/code><\/pre>\n <circle><\/code> (\u5186)<\/h3>\n <circle><\/code>\u8981\u7d20\u306f\u3001\u5186\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/p>\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"orange\" stroke=\"brown\" stroke-width=\"3\"\/>\n<\/svg><\/code><\/pre>\n <ellipse><\/code> (\u6955\u5186)<\/h3>\n <ellipse><\/code>\u8981\u7d20\u306f\u3001\u6955\u5186\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/p>\n <svg width=\"200\" height=\"100\" viewBox=\"0 0 200 100\">\n <ellipse cx=\"100\" cy=\"50\" rx=\"80\" ry=\"30\" fill=\"pink\" stroke=\"red\" \/>\n<\/svg><\/code><\/pre>\n <line><\/code> (\u7dda)<\/h3>\n <line><\/code>\u8981\u7d20\u306f\u30012\u3064\u306e\u70b9\u306e\u9593\u306b\u76f4\u7dda\u3092\u5f15\u304f\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u6700\u3082\u5358\u7d14\u306a\u56f3\u5f62\u306e\u4e00\u3064\u3067\u3059\u3002<\/p>\n \n \u4e3b\u8981\u5c5e\u6027:<\/strong>\n \n x1<\/code>: \u59cb\u70b9\u306eX\u5ea7\u6a19<\/li>\n y1<\/code>: \u59cb\u70b9\u306eY\u5ea7\u6a19<\/li>\n x2<\/code>: \u7d42\u70b9\u306eX\u5ea7\u6a19<\/li>\n y2<\/code>: \u7d42\u70b9\u306eY\u5ea7\u6a19<\/li>\n stroke<\/code>: \u7dda\u306e\u8272<\/li>\n stroke-width<\/code>: \u7dda\u306e\u592a\u3055<\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n <line x1=\"10\" y1=\"10\" x2=\"90\" y2=\"90\" stroke=\"black\" stroke-width=\"5\" \/>\n<\/svg><\/code><\/pre>\n <text><\/code> (\u30c6\u30ad\u30b9\u30c8)<\/h3>\n <text><\/code>\u8981\u7d20\u306f\u3001SVG\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u5185\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n <svg width=\"300\" height=\"100\" viewBox=\"0 0 300 100\">\n <style>\n.my-text {\n font-family: sans-serif;\n font-size: 20px;\n }\n <\/style>\n <text x=\"10\" y=\"30\" class=\"my-text\" fill=\"blue\">\u5de6\u63c3\u3048 (start)<\/text>\n <text x=\"150\" y=\"60\" class=\"my-text\" fill=\"green\" text-anchor=\"middle\">\u4e2d\u592e\u63c3\u3048 (middle)<\/text>\n <text x=\"290\" y=\"90\" class=\"my-text\" fill=\"red\" text-anchor=\"end\">\u53f3\u63c3\u3048 (end)<\/text>\n<\/svg><\/code><\/pre>\n <\/section>\n\n \n 4. SVG\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0 (Styling SVG)<\/h2>\n SVG\u8981\u7d20\u306e\u898b\u305f\u76ee\uff08\u8272\u3001\u7dda\u3001\u900f\u660e\u5ea6\u306a\u3069\uff09\u3092\u5236\u5fa1\u3059\u308b\u306b\u306f\u3001\u4e3b\u306b2\u3064\u306e\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\uff1a\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c5e\u6027\u3068CSS\u3067\u3059\u3002<\/p>\n \u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c5e\u6027 (fill<\/code>, stroke<\/code>, stroke-width<\/code>) \u306b\u3088\u308b\u65b9\u6cd5<\/h3>\n SVG\u8981\u7d20\u306e\u30bf\u30b0\u5185\u306b\u76f4\u63a5\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\u3059\u308b\u5c5e\u6027\u3092\u8a18\u8ff0\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n \n fill<\/code>:<\/strong> \u56f3\u5f62\u306e\u5185\u90e8\u3092\u5857\u308a\u3064\u3076\u3059\u8272\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/li>\n stroke<\/code>:<\/strong> \u56f3\u5f62\u306e\u8f2a\u90ed\u7dda\u306e\u8272\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/li>\n stroke-width<\/code>:<\/strong> \u8f2a\u90ed\u7dda\u306e\u592a\u3055\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/li>\n <\/ul>\n CSS\u306b\u3088\u308b\u65b9\u6cd5 (<style><\/code>\u30bf\u30b0\u3001\u5916\u90e8CSS\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb)<\/h3>\n \u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c5e\u6027\u306e\u4ee3\u308f\u308a\u306b\u3001CSS\uff08Cascading Style Sheets\uff09\u3092\u4f7f\u7528\u3057\u3066SVG\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n <svg width=\"200\" height=\"100\" viewBox=\"0 0 200 100\">\n <defs>\n <style>\n.my-circle {\n fill: orange;\n stroke: brown;\n stroke-width: 2;\n }\n.my-circle:hover {\n fill: yellow;\n }\n <\/style>\n <\/defs>\n <circle class=\"my-circle\" cx=\"50\" cy=\"50\" r=\"40\" \/>\n<\/svg><\/code><\/pre>\n \u30b0\u30eb\u30fc\u30d7\u5316\u3068\u30b9\u30bf\u30a4\u30eb\u306e\u7d99\u627f (<g><\/code>\u30bf\u30b0)<\/h3>\n <g><\/code>\uff08group\uff09\u30bf\u30b0\u306f\u3001\u8907\u6570\u306eSVG\u8981\u7d20\u3092\u4e00\u3064\u306e\u30b0\u30eb\u30fc\u30d7\u3068\u3057\u3066\u307e\u3068\u3081\u308b\u305f\u3081\u306e\u30b3\u30f3\u30c6\u30ca\u8981\u7d20\u3067\u3059\u3002<g><\/code>\u30bf\u30b0\u306b\u9069\u7528\u3055\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u306f\u3001\u30b0\u30eb\u30fc\u30d7\u5185\u306e\u5b50\u8981\u7d20\u306b\u7d99\u627f\u3055\u308c\u307e\u3059\u3002<\/p>\n <\/section>\n\n \n 5. JavaScript\u306b\u3088\u308bSVG\u64cd\u4f5c (Manipulating SVG with JavaScript)<\/h2>\n SVG\u306e\u5927\u304d\u306a\u5229\u70b9\u306e\u4e00\u3064\u306f\u3001JavaScript\u3092\u4f7f\u3063\u3066\u52d5\u7684\u306b\u64cd\u4f5c\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002\u7279\u306b\u30a4\u30f3\u30e9\u30a4\u30f3SVG\u306e\u5834\u5408\u3001SVG\u8981\u7d20\u306fDOM\u306e\u4e00\u90e8\u3068\u3057\u3066\u6271\u308f\u308c\u308b\u305f\u3081\u3001\u6a19\u6e96\u7684\u306aDOM\u64cd\u4f5cAPI\u3092\u7528\u3044\u3066\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u8868\u73fe\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n SVG\u8981\u7d20\u3078\u306e\u30a2\u30af\u30bb\u30b9 (DOM\u64cd\u4f5c: getElementById<\/code>, querySelector<\/code>)<\/h3>\n \u30a4\u30f3\u30e9\u30a4\u30f3SVG\u5185\u306e\u7279\u5b9a\u306e\u8981\u7d20\u3092JavaScript\u3067\u64cd\u4f5c\u3059\u308b\u306b\u306f\u3001\u307e\u305a\u305d\u306e\u8981\u7d20\u3078\u306e\u53c2\u7167\u3092\u53d6\u5f97\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306f\u3001HTML\u8981\u7d20\u3092\u53d6\u5f97\u3059\u308b\u306e\u3068\u540c\u69d8\u306e\u65b9\u6cd5\u3067\u884c\u3048\u307e\u3059\u3002<\/p>\n \/\/ ID\u3067\u53d6\u5f97\nconst circleElement = document.getElementById('myCircle');\n\n\/\/ CSS\u30bb\u30ec\u30af\u30bf\u3067\u53d6\u5f97\nconst rectElement = document.querySelector('#myRect');<\/code><\/pre>\n \u5c5e\u6027\u306e\u52d5\u7684\u306a\u5909\u66f4 (setAttribute<\/code>)<\/h3>\n JavaScript\u3067SVG\u8981\u7d20\u3078\u306e\u53c2\u7167\u3092\u53d6\u5f97\u3067\u304d\u308c\u3070\u3001\u305d\u306e\u8981\u7d20\u306e\u5c5e\u6027\u5024\u3092\u52d5\u7684\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u56f3\u5f62\u306e\u4f4d\u7f6e\u3001\u30b5\u30a4\u30ba\u3001\u8272\u306a\u3069\u3092\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u5236\u5fa1\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n const circle = document.getElementById('myCircle');\n\n\/\/ cx\u5c5e\u6027\u306e\u5024\u3092100\u306b\u5909\u66f4\ncircle.setAttribute('cx', '100');\n\n\/\/ \u534a\u5f84r\u309250\u306b\u5909\u66f4\ncircle.setAttribute('r', '50');\n\n\/\/ fill\u5c5e\u6027\u3092\u7dd1\u306b\u5909\u66f4\ncircle.setAttribute('fill', 'green');<\/code><\/pre>\n \u30b9\u30bf\u30a4\u30eb\u306e\u52d5\u7684\u306a\u5909\u66f4 (element.style<\/code>)<\/h3>\n SVG\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3082JavaScript\u3067\u52d5\u7684\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002element.style<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u901a\u3058\u3066\u500b\u3005\u306eCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5909\u66f4\u3059\u308b\u65b9\u6cd5\u304c\u4e00\u822c\u7684\u3067\u3059\u3002<\/p>\n const rect = document.getElementById('myRect');\n\n\/\/ \u5857\u308a\u8272\u3092\u8d64\u306b\nrect.style.fill = 'red';\n\n\/\/ \u7dda\u306e\u8272\u3092\u9ec4\u8272\u306b\nrect.style.stroke = 'yellow';\n\n\/\/ \u7dda\u306e\u592a\u3055\u30925px\u306b\nrect.style.strokeWidth = '5px';<\/code><\/pre>\n \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306e\u8ffd\u52a0 (addEventListener<\/code>\u306b\u3088\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3)<\/h3>\n SVG\u8981\u7d20\u306b\u30e6\u30fc\u30b6\u30fc\u306e\u64cd\u4f5c\uff08\u30af\u30ea\u30c3\u30af\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u306a\u3069\uff09\u306b\u5bfe\u3059\u308b\u5fdc\u7b54\u3092\u8ffd\u52a0\u3059\u308b\u306b\u306f\u3001addEventListener()<\/code>\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n const interactiveCircle = document.getElementById('myCircle');\n\n\/\/ \u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\ninteractiveCircle.addEventListener('click', (event) => {\n console.log('Circle clicked!');\n \/\/ \u4f8b: \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3089\u8272\u3092\u5909\u3048\u308b\n event.target.setAttribute('fill', 'magenta');\n});<\/code><\/pre>\n <\/section>\n\n \n 6. \u5b9f\u8df5\u7684\u306a\u30b3\u30fc\u30c9\u4f8b (Practical Code Examples)<\/h2>\n \u9759\u7684\u306a\u56f3\u5f62\u306e\u63cf\u753b\u4f8b<\/h3>\n \u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u306f\u3001JavaScript\u3092\u4f7f\u7528\u305b\u305a\u3001SVG\u306e\u5404\u56f3\u5f62\u30bf\u30b0\u3068\u5c5e\u6027\u306e\u307f\u3067\u9759\u7684\u306a\u56f3\u5f62\u3092\u63cf\u753b\u3059\u308b\u4f8b\u3067\u3059\u3002<\/p>\n <svg width=\"400\" height=\"250\" viewBox=\"0 0 400 250\" style=\"border: 1px solid #ccc;\">\n \n <rect x=\"20\" y=\"40\" width=\"100\" height=\"60\" fill=\"red\" stroke=\"black\" stroke-width=\"2\" transform=\"rotate(30 70 50)\" \/>\n\n \n <circle cx=\"220\" cy=\"60\" r=\"40\" fill=\"yellow\" stroke=\"green\" stroke-width=\"8\" \/>\n\n \n <ellipse cx=\"80\" cy=\"170\" rx=\"60\" ry=\"30\" fill=\"none\" stroke=\"blue\" stroke-width=\"3\" stroke-dasharray=\"10 5\" transform=\"rotate(120 80 170)\" \/>\n\n \n <text x=\"300\" y=\"175\" font-family=\"serif\" font-size=\"24\" fill=\"purple\" text-anchor=\"middle\" dominant-baseline=\"middle\">\u306e\u3093\u304d\u306e\u65e5\u8a18<\/text>\n\n \n <line x1=\"220\" y1=\"130\" x2=\"380\" y2=\"130\" stroke=\"darkgreen\" stroke-width=\"2\" \/>\n <line x1=\"220\" y1=\"140\" x2=\"380\" y2=\"140\" stroke=\"blue\" stroke-width=\"2\" \/>\n<\/svg><\/code><\/pre>\n \u8868\u793a\u4f8b\uff1a<\/strong><\/p>\n \n JavaScript\/CSS\u306b\u3088\u308bSVG\u64cd\u4f5c\u30e1\u30bd\u30c3\u30c9\u30fb\u30d7\u30ed\u30d1\u30c6\u30a3\u65e9\u898b\u8868<\/h3>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \u64cd\u4f5c\u5bfe\u8c61 (\u5c5e\u6027\/\u30b9\u30bf\u30a4\u30eb)<\/th>\n \u8981\u7d20\u4f8b\u3067\u306e\u5c5e\u6027\u540d<\/th>\n JavaScript\u3067\u306e\u64cd\u4f5c\u65b9\u6cd5 (\u4f8b)<\/th>\n CSS\u3067\u306e\u64cd\u4f5c\u65b9\u6cd5 (\u30d7\u30ed\u30d1\u30c6\u30a3)<\/th>\n \u7c21\u5358\u306a\u8aac\u660e<\/th>\n <\/tr>\n <\/thead>\n \u4f4d\u7f6e (X\u5ea7\u6a19)<\/td>\n cx<\/code>, x<\/code><\/td>\n el.setAttribute('cx', val)<\/code><\/td>\n cx: val;<\/code> \u00b9<\/td>\n \u56f3\u5f62\u306e\u6c34\u5e73\u4f4d\u7f6e<\/td>\n <\/tr>\n \u4f4d\u7f6e (Y\u5ea7\u6a19)<\/td>\n cy<\/code>, y<\/code><\/td>\n el.setAttribute('cy', val)<\/code><\/td>\n cy: val;<\/code> \u00b9<\/td>\n \u56f3\u5f62\u306e\u5782\u76f4\u4f4d\u7f6e<\/td>\n <\/tr>\n \u30b5\u30a4\u30ba (\u534a\u5f84)<\/td>\n r<\/code> (\u5186)<\/td>\n el.setAttribute('r', val)<\/code><\/td>\n r: val;<\/code> \u00b9<\/td>\n \u5186\u306e\u534a\u5f84<\/td>\n <\/tr>\n \u30b5\u30a4\u30ba (\u5e45)<\/td>\n width<\/code> (\u9577\u65b9\u5f62)<\/td>\n el.setAttribute('width', val)<\/code><\/td>\n width: val;<\/code> \u00b9<\/td>\n \u9577\u65b9\u5f62\u306e\u5e45<\/td>\n <\/tr>\n \u5857\u308a\u8272<\/td>\n fill<\/code><\/td>\n el.style.fill = color<\/code><\/td>\n fill: color;<\/code><\/td>\n \u56f3\u5f62\u306e\u5857\u308a\u3064\u3076\u3057\u8272<\/td>\n <\/tr>\n \u7dda\u8272<\/td>\n stroke<\/code><\/td>\n el.style.stroke = color<\/code><\/td>\n stroke: color;<\/code><\/td>\n \u56f3\u5f62\u306e\u7dda\u306e\u8272<\/td>\n <\/tr>\n \u7dda\u5e45<\/td>\n stroke-width<\/code><\/td>\n el.style.strokeWidth = val<\/code><\/td>\n stroke-width: val;<\/code><\/td>\n \u56f3\u5f62\u306e\u7dda\u306e\u592a\u3055<\/td>\n <\/tr>\n \u30c6\u30ad\u30b9\u30c8\u5185\u5bb9<\/td>\n (\u30c6\u30ad\u30b9\u30c8\u30ce\u30fc\u30c9)<\/td>\n el.textContent = text<\/code><\/td>\n (CSS\u3067\u306f\u4e0d\u53ef)<\/td>\n \u30c6\u30ad\u30b9\u30c8\u8981\u7d20\u306e\u5185\u5bb9<\/td>\n <\/tr>\n \u30a4\u30d9\u30f3\u30c8\u51e6\u7406<\/td>\n (\u30af\u30ea\u30c3\u30af\u306a\u3069)<\/td>\n el.addEventListener('click', func)<\/code><\/td>\n :hover<\/code>, :active<\/code> \u306a\u3069<\/td>\n \u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n \u00b9 \u3053\u308c\u3089\u306e\u30b8\u30aa\u30e1\u30c8\u30ea\u95a2\u9023\u30d7\u30ed\u30d1\u30c6\u30a3\u3092CSS\u3067\u76f4\u63a5\u6307\u5b9a\u3059\u308b\u6a5f\u80fd\u306fSVG 2\u4ed5\u69d8\u3067\u5c0e\u5165\u3055\u308c\u307e\u3057\u305f\u304c\u3001\u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\u306f\u307e\u3060\u9650\u5b9a\u7684\u3067\u3059\u3002JavaScript\u306esetAttribute<\/code>\u3092\u4f7f\u7528\u3059\u308b\u306e\u304c\u6700\u3082\u78ba\u5b9f\u3067\u3059\u3002<\/p>\n <\/section>\n\n \n 7. \u8907\u96d1\u306a\u56f3\u5f62\u306e\u63cf\u753b (<path><\/code>\u30bf\u30b0)<\/h2>\n <path><\/code>\u8981\u7d20\u306f\u3001SVG\u3067\u6700\u3082\u5f37\u529b\u304b\u3064\u6c4e\u7528\u7684\u306a\u56f3\u5f62\u63cf\u753b\u8981\u7d20\u3067\u3059\u3002\u76f4\u7dda\u3001\u66f2\u7dda\u3001\u5186\u5f27\u306a\u3069\u3092\u81ea\u7531\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001<rect><\/code>\u3084<circle><\/code>\u306e\u3088\u3046\u306a\u57fa\u672c\u56f3\u5f62\u3067\u306f\u8868\u73fe\u3067\u304d\u306a\u3044\u3001\u3042\u3089\u3086\u308b\u8907\u96d1\u306a\u5f62\u72b6\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n d<\/code>\u5c5e\u6027\uff1a\u30d1\u30b9\u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9<\/h3>\n <path><\/code>\u8981\u7d20\u306e\u5f62\u72b6\u306f\u3001d<\/code>\u5c5e\u6027\u306b\u8a2d\u5b9a\u3055\u308c\u308b\u4e00\u9023\u306e\u30b3\u30de\u30f3\u30c9\u6587\u5b57\u5217\u306b\u3088\u3063\u3066\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u6587\u5b57\u5217\u306f\u300c\u30da\u30f3\u3092\u52d5\u304b\u3059\u305f\u3081\u306e\u547d\u4ee4\u300d\u306e\u96c6\u307e\u308a\u3068\u8003\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n \u5404\u30b3\u30de\u30f3\u30c9\u306f\u30011\u6587\u5b57\u306e\u547d\u4ee4\u30b3\u30fc\u30c9\uff08\u4f8b: M<\/code>\u306f”Move to”\uff09\u3068\u3001\u305d\u308c\u306b\u7d9a\u304f\u6570\u5024\u30d1\u30e9\u30e1\u30fc\u30bf\uff08\u5ea7\u6a19\u306a\u3069\uff09\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002\u547d\u4ee4\u30b3\u30fc\u30c9\u306b\u306f\u5927\u6587\u5b57\u3068\u5c0f\u6587\u5b57\u306e\u533a\u5225\u304c\u3042\u308a\u3001\u305d\u308c\u305e\u308c\u7570\u306a\u308b\u610f\u5473\u3092\u6301\u3061\u307e\u3059\u3002<\/p>\n \n \u5927\u6587\u5b57\u30b3\u30de\u30f3\u30c9 (\u4f8b: M<\/code>, L<\/code>, C<\/code>):<\/strong> \u7d76\u5bfe\u5ea7\u6a19\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002SVG\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u539f\u70b9(0,0)\u3092\u57fa\u6e96\u3068\u3057\u305f\u5ea7\u6a19\u3067\u3059\u3002<\/li>\n \u5c0f\u6587\u5b57\u30b3\u30de\u30f3\u30c9 (\u4f8b: m<\/code>, l<\/code>, c<\/code>):<\/strong> \u76f8\u5bfe\u5ea7\u6a19\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u76f4\u524d\u306e\u63cf\u753b\u70b9\u306e\u4f4d\u7f6e\u3092\u57fa\u6e96\u3068\u3057\u305f\u76f8\u5bfe\u7684\u306a\u79fb\u52d5\u91cf\u3067\u3059\u3002<\/li>\n <\/ul>\n \u4e3b\u8981\u306a\u30d1\u30b9\u30b3\u30de\u30f3\u30c9<\/h3>\n \u4ee5\u4e0b\u306f\u3001d<\/code>\u5c5e\u6027\u3067\u3088\u304f\u4f7f\u7528\u3055\u308c\u308b\u4e3b\u8981\u306a\u30b3\u30de\u30f3\u30c9\u3067\u3059\u3002<\/p>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \u30b3\u30de\u30f3\u30c9<\/th>\n \u540d\u79f0<\/th>\n \u30d1\u30e9\u30e1\u30fc\u30bf<\/th>\n \u8aac\u660e<\/th>\n <\/tr>\n <\/thead>\n M x y<\/code> m dx dy<\/code><\/td>\n Moveto (\u79fb\u52d5)<\/td>\n (x, y)<\/td>\n \u30da\u30f3\u3092\u6307\u5b9a\u3057\u305f\u5ea7\u6a19\u306b\u79fb\u52d5\u3055\u305b\u307e\u3059\u3002\u30d1\u30b9\u306e\u63cf\u753b\u3092\u958b\u59cb\u3059\u308b\u70b9\u3001\u307e\u305f\u306f\u65b0\u3057\u3044\u30b5\u30d6\u30d1\u30b9\u3092\u958b\u59cb\u3059\u308b\u70b9\u3068\u3057\u3066\u4f7f\u7528\u3057\u307e\u3059\u3002<\/td>\n <\/tr>\n L x y<\/code> l dx dy<\/code><\/td>\n Lineto (\u76f4\u7dda)<\/td>\n (x, y)<\/td>\n \u73fe\u5728\u306e\u70b9\u304b\u3089\u6307\u5b9a\u3057\u305f\u5ea7\u6a19\u307e\u3067\u76f4\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/td>\n <\/tr>\n H x<\/code> h dx<\/code><\/td>\n Horizontal Lineto (\u6c34\u5e73\u7dda)<\/td>\n x<\/td>\n \u73fe\u5728\u306e\u70b9\u304b\u3089\u6c34\u5e73\u65b9\u5411\u306b\u76f4\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/td>\n <\/tr>\n V y<\/code> v dy<\/code><\/td>\n Vertical Lineto (\u5782\u76f4\u7dda)<\/td>\n y<\/td>\n \u73fe\u5728\u306e\u70b9\u304b\u3089\u5782\u76f4\u65b9\u5411\u306b\u76f4\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/td>\n <\/tr>\n C x1 y1, x2 y2, x y<\/code> c dx1 dy1, dx2 dy2, dx dy<\/code><\/td>\n Curveto (3\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda)<\/td>\n (x1, y1), (x2, y2), (x, y)<\/td>\n 2\u3064\u306e\u5236\u5fa1\u70b9 (x1,y1), (x2,y2) \u3092\u4f7f\u3063\u3066\u3001\u73fe\u5728\u306e\u70b9\u304b\u3089\u7d42\u70b9(x,y)\u307e\u30673\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/td>\n <\/tr>\n Q x1 y1, x y<\/code> q dx1 dy1, dx dy<\/code><\/td>\n Quadratic Curveto (2\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda)<\/td>\n (x1, y1), (x, y)<\/td>\n 1\u3064\u306e\u5236\u5fa1\u70b9 (x1,y1) \u3092\u4f7f\u3063\u3066\u3001\u73fe\u5728\u306e\u70b9\u304b\u3089\u7d42\u70b9(x,y)\u307e\u30672\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/td>\n <\/tr>\n A rx ry rot large-arc sweep x y<\/code> a rx ry rot large-arc sweep dx dy<\/code><\/td>\n Elliptical Arc (\u5186\u5f27)<\/td>\n (rx, ry, rot, large-arc, sweep, x, y)<\/td>\n \u73fe\u5728\u306e\u70b9\u304b\u3089\u7d42\u70b9(x,y)\u307e\u3067\u3001\u6955\u5186\u306e\u5186\u5f27\u3092\u5f15\u304d\u307e\u3059\u3002\u30d1\u30e9\u30e1\u30fc\u30bf\u304c\u591a\u304f\u8907\u96d1\u3067\u3059\u304c\u3001\u5186\u3084\u6955\u5186\u306e\u4e00\u90e8\u3092\u8868\u73fe\u3059\u308b\u306e\u306b\u4f7f\u308f\u308c\u307e\u3059\u3002<\/td>\n <\/tr>\n Z<\/code> z<\/code><\/td>\n ClosePath (\u9589\u3058\u308b)<\/td>\n \u306a\u3057<\/td>\n \u73fe\u5728\u306e\u70b9\u304b\u3089\u3001\u73fe\u5728\u306e\u30b5\u30d6\u30d1\u30b9\u306e\u958b\u59cb\u70b9\uff08\u6700\u5f8c\u306eM\/m\u30b3\u30de\u30f3\u30c9\u306e\u4f4d\u7f6e\uff09\u307e\u3067\u76f4\u7dda\u3092\u5f15\u3044\u3066\u30d1\u30b9\u3092\u9589\u3058\u307e\u3059\u3002<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <path><\/code>\u306e\u30b5\u30f3\u30d7\u30eb<\/h3>\n <path><\/code>\u8981\u7d20\u3092\u4f7f\u3063\u3066\u3001\u661f\u3084\u4e09\u89d2\u5f62\u3068\u3044\u3063\u305f\u57fa\u672c\u56f3\u5f62\u30bf\u30b0\u3067\u306f\u76f4\u63a5\u63cf\u3051\u306a\u3044\u56f3\u5f62\u3092\u4f5c\u6210\u3059\u308b\u4f8b\u3067\u3059\u3002<\/p>\n <svg width=\"400\" height=\"200\" viewBox=\"0 0 400 200\" style=\"border: 1px solid #ccc;\">\n \n <path d=\"M 50 10 L 65 45 L 100 45 L 75 70 L 85 105 L 50 85 L 15 105 L 25 70 L 0 45 L 35 45 Z\" fill=\"gold\" stroke=\"orange\" stroke-width=\"2\" transform=\"translate(30, 30) scale(0.8)\" \/>\n <path d=\"M 50 10 L 65 45 L 100 45 L 75 70 L 85 105 L 50 85 L 15 105 L 25 70 L 0 45 L 35 45 Z\" fill=\"#ffc0cb\" stroke=\"deeppink\" stroke-width=\"2\" transform=\"translate(150, 60) scale(0.5)\" \/>\n\n \n <path d=\"M 50 0 L 100 100 L 0 100 Z\" fill=\"lightgreen\" stroke=\"darkgreen\" stroke-width=\"2\" transform=\"translate(250, 20)\" \/>\n <path d=\"M 50 0 L 100 50 L 0 50 Z\" fill=\"skyblue\" stroke=\"darkblue\" stroke-width=\"2\" transform=\"translate(280, 130)\" \/>\n<\/svg><\/code><\/pre>\n \u8868\u793a\u4f8b\uff1a<\/strong><\/p>\n \n 8. \u307e\u3068\u3081\u3068\u6b21\u306e\u30b9\u30c6\u30c3\u30d7 (Conclusion and Next Steps)<\/h2>\n \u4e3b\u8981\u306a\u5b66\u7fd2\u30dd\u30a4\u30f3\u30c8\u306e\u8981\u7d04<\/h3>\n \u672c\u30ec\u30dd\u30fc\u30c8\u3067\u306f\u3001SVG\u306e\u57fa\u672c\u7684\u306a\u6982\u5ff5\u304b\u3089\u3001CSS\u3068JavaScript\u3092\u7528\u3044\u305f\u5177\u4f53\u7684\u306a\u64cd\u4f5c\u65b9\u6cd5\u307e\u3067\u3092\u89e3\u8aac\u3057\u307e\u3057\u305f\u3002SVG\u306f\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u3067\u3001DOM\u64cd\u4f5c\u304c\u53ef\u80fd\u3067\u3042\u308a\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30a6\u30a7\u30d6\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n \u3055\u3089\u306a\u308b\u5b66\u7fd2\u306e\u305f\u3081\u306e\u30ea\u30bd\u30fc\u30b9\u7d39\u4ecb<\/h3>\n SVG\u306f\u975e\u5e38\u306b\u5965\u304c\u6df1\u304f\u3001\u591a\u6a5f\u80fd\u306a\u6280\u8853\u3067\u3059\u3002\u3055\u3089\u306b\u6df1\u304f\u5b66\u7fd2\u3092\u9032\u3081\u305f\u3044\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u30ea\u30bd\u30fc\u30b9\u304c\u5f79\u7acb\u3064\u3067\u3057\u3087\u3046\u3002<\/p>\n \n MDN Web Docs: SVG \u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/a><\/li>\n CSS-Tricks: SVG\u95a2\u9023\u8a18\u4e8b<\/a><\/li>\n svg-tutorial.com<\/a><\/li>\n <\/ul>\n \u6b21\u306e\u30b9\u30c6\u30c3\u30d7<\/h3>\n SVG\u306e\u57fa\u672c\u3092\u7406\u89e3\u3057\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30c8\u30d4\u30c3\u30af\u306b\u6311\u6226\u3057\u3066\u307f\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n \n SVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3:<\/strong> SMIL, CSS, JavaScript\u3092\u7528\u3044\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3002<\/li>\n SVG\u30d5\u30a3\u30eb\u30bf\u30fc\u52b9\u679c:<\/strong> \u307c\u304b\u3057\u3084\u5f71\u306a\u3069\u306e\u8996\u899a\u52b9\u679c\u3002<\/li>\n \u30c7\u30fc\u30bf\u30d3\u30b8\u30e5\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3:<\/strong> D3.js\u306a\u3069\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u306e\u9023\u643a\u3002<\/li>\n <\/ul>\n <\/section>\n <\/main>\n\n<\/div>\n\n<\/body>\n","protected":false},"excerpt":{"rendered":"SVG\u30bf\u30b0\u89e3\u8aac CSS\u3068JavaScript\u306b\u3088\u308b\u57fa\u672c\u56f3\u5f62\u64cd\u4f5c \u76ee\u6b21 1. \u306f\u3058\u3081\u306b (Introduction) 2. SVG\u306e\u57fa\u672c\u69cb\u9020 (Basic SVG Structure) 3. SVG\u57fa\u672c\u56f3\u5f62\u30bf\u30b0 (Basi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-svg","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1563","page","type-page","status-publish","hentry"],"yoast_head":"\nSVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18\" \/>\n<meta property=\"og:description\" content=\"SVG\u30bf\u30b0\u89e3\u8aac CSS\u3068JavaScript\u306b\u3088\u308b\u57fa\u672c\u56f3\u5f62\u64cd\u4f5c \u76ee\u6b21 1. \u306f\u3058\u3081\u306b (Introduction) 2. SVG\u306e\u57fa\u672c\u69cb\u9020 (Basic SVG Structure) 3. SVG\u57fa\u672c\u56f3\u5f62\u30bf\u30b0 (Basi […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563\" \/>\n<meta property=\"og:site_name\" content=\"\u306e\u3093\u304d\u306e\u65e5\u8a18\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1004\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"5\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563\",\"url\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563\",\"name\":\"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#website\"},\"datePublished\":\"2025-06-14T00:54:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?page_id=1563#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG\u30bf\u30b0\u89e3\u8aac\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#website\",\"url\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/\",\"name\":\"\u306e\u3093\u304d\u306e\u65e5\u8a18\",\"description\":\"\u65e5\u5e38\u3067\u3001\u601d\u3063\u305f\u4e8b\u3001\u611f\u3058\u305f\u4e8b\u3092\u8a18\u9332\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#\\\/schema\\\/person\\\/a54ab33d75d0ea64f384d5277bd56ad7\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.nonki.coffeebittersweet.net\\\/#\\\/schema\\\/person\\\/a54ab33d75d0ea64f384d5277bd56ad7\",\"name\":\"cbs@nonki\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\",\"url\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\",\"contentUrl\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\",\"width\":1004,\"height\":1024,\"caption\":\"cbs@nonki\"},\"logo\":{\"@id\":\"https:\\/\\/www.nonki.coffeebittersweet.net\\/wp-content\\/uploads\\/2025\\/06\\/20250524-02.png\"}}]}<\/script>\n","yoast_head_json":{"title":"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","og_locale":"ja_JP","og_type":"article","og_title":"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18","og_description":"SVG\u30bf\u30b0\u89e3\u8aac CSS\u3068JavaScript\u306b\u3088\u308b\u57fa\u672c\u56f3\u5f62\u64cd\u4f5c \u76ee\u6b21 1. \u306f\u3058\u3081\u306b (Introduction) 2. SVG\u306e\u57fa\u672c\u69cb\u9020 (Basic SVG Structure) 3. SVG\u57fa\u672c\u56f3\u5f62\u30bf\u30b0 (Basi […]","og_url":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","og_site_name":"\u306e\u3093\u304d\u306e\u65e5\u8a18","og_image":[{"url":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","width":1004,"height":1024,"type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"5\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","url":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563","name":"SVG\u30bf\u30b0\u89e3\u8aac - \u306e\u3093\u304d\u306e\u65e5\u8a18","isPartOf":{"@id":"https:\/\/www.nonki.coffeebittersweet.net\/#website"},"datePublished":"2025-06-14T00:54:09+00:00","breadcrumb":{"@id":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.nonki.coffeebittersweet.net\/?page_id=1563#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/www.nonki.coffeebittersweet.net\/"},{"@type":"ListItem","position":2,"name":"SVG\u30bf\u30b0\u89e3\u8aac"}]},{"@type":"WebSite","@id":"https:\/\/www.nonki.coffeebittersweet.net\/#website","url":"https:\/\/www.nonki.coffeebittersweet.net\/","name":"\u306e\u3093\u304d\u306e\u65e5\u8a18","description":"\u65e5\u5e38\u3067\u3001\u601d\u3063\u305f\u4e8b\u3001\u611f\u3058\u305f\u4e8b\u3092\u8a18\u9332\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002","publisher":{"@id":"https:\/\/www.nonki.coffeebittersweet.net\/#\/schema\/person\/a54ab33d75d0ea64f384d5277bd56ad7"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nonki.coffeebittersweet.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":["Person","Organization"],"@id":"https:\/\/www.nonki.coffeebittersweet.net\/#\/schema\/person\/a54ab33d75d0ea64f384d5277bd56ad7","name":"cbs@nonki","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","url":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","contentUrl":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png","width":1004,"height":1024,"caption":"cbs@nonki"},"logo":{"@id":"https:\/\/mlla7u9wd2ab.i.optimole.com\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.nonki.coffeebittersweet.net\/wp-content\/uploads\/2025\/06\/20250524-02.png"}}]}},"_links":{"self":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages\/1563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1563"}],"version-history":[{"count":1,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages\/1563\/revisions"}],"predecessor-version":[{"id":1564,"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=\/wp\/v2\/pages\/1563\/revisions\/1564"}],"wp:attachment":[{"href":"https:\/\/www.nonki.coffeebittersweet.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}