{"id":345,"date":"2025-08-26T15:13:52","date_gmt":"2025-08-26T06:13:52","guid":{"rendered":"https:\/\/kyum.chu.jp\/wp\/?p=345"},"modified":"2025-08-31T23:24:57","modified_gmt":"2025-08-31T14:24:57","slug":"svg%e7%94%bb%e5%83%8f%e3%81%ae%e5%ae%9a%e7%be%a9%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/achamaweb.tech\/?p=345","title":{"rendered":"SVG\u753b\u50cf\u306e\u5b9a\u7fa9\u65b9\u6cd5"},"content":{"rendered":"<h3>SVG\uff08Scalable Vector Graphics\uff09\u306f\u3001\u30a6\u30a7\u30d6\u4e0a\u3067\u30d9\u30af\u30bf\u30fc\u753b\u50cf\u3092\u6271\u3046\u305f\u3081\u306eXML\u30d9\u30fc\u30b9\u306e\u8a00\u8a9e\u3067\u3059\u3002<\/h3>\n<div class=\"header_boxX\">\n\tSVG\u306e\u4e3b\u306a\u7279\u5fb4\u306f\u4ee5\u4e0b\u306e\u901a\u308a<\/p>\n<ul>\n<li><b>\u62e1\u5927\u30fb\u7e2e\u5c0f\u306b\u5f37\u3044:<\/b> SVG\u306f\u70b9\u3001\u7dda\u3001\u591a\u89d2\u5f62\u306a\u3069\u306e\u6570\u5b66\u7684\u306a\u30c7\u30fc\u30bf\u3067\u753b\u50cf\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u3001\u62e1\u5927\u3057\u3066\u3082\u307c\u3084\u3051\u308b\u3053\u3068\u304c\u306a\u304f\u30ed\u30b4\u3084\u30a2\u30a4\u30b3\u30f3\u306a\u3069\u69d8\u3005\u306a\u30b5\u30a4\u30ba\u3067\u8868\u793a\u3059\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<li><b>\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u7de8\u96c6\u53ef\u80fd:<\/b> SVG\u30d5\u30a1\u30a4\u30eb\u306f\u30c6\u30ad\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306a\u306e\u3067\u3001\u30e1\u30e2\u5e33\u306a\u3069\u306e\u30b7\u30f3\u30d7\u30eb\u306a\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u958b\u3044\u3066\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u305f\u308a\u3001\u7de8\u96c6\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<li><b>\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u304c\u5bb9\u6613:<\/b> CSS\uff08Cascading Style Sheets\uff09\u3092\u4f7f\u3063\u3066\u3001SVG\u753b\u50cf\u306e\u8272\u3084\u7dda\u306e\u592a\u3055\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3092\u7c21\u5358\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/li>\n<li><b>\u8efd\u91cf:<\/b> \u30b7\u30f3\u30d7\u30eb\u306a\u753b\u50cf\u3067\u3042\u308c\u3070\u3001\u591a\u304f\u306e\u5834\u5408JPEG\u3084PNG\u3088\u308a\u3082\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u5c0f\u3055\u304f\u306a\u308a\u307e\u3059\u3002<\/li>\n<li><b>\u5229\u7528:<\/b> \u5358\u306a\u308b\u9759\u6b62\u753b\u3060\u3051\u3067\u306a\u304f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u8981\u7d20\u3084\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3082\u53ef\u80fd\u3067\u3059\u3002\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3001\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u3084\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3001\u5e45\u5e83\u3044\u7528\u9014\u3067\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/div>\n<style> \n.path-option {\n  font-size: 9px;\n}\n.path-option td {\n  padding: 2px 5px; \/* \u4e0a\u4e0b\u306b2px\u3001\u5de6\u53f3\u306b5px\u306e\u4f59\u767d\u3092\u8a2d\u5b9a *\/\n}\n<\/style>\n<h2>SVG\u57fa\u672c\u56f3\u5f62\u8981\u7d20\u306e\u4f7f\u3044\u65b9<\/h2>\n<p>SVG\uff08Scalable Vector Graphics\uff09\u306f\u3001XML\u30d9\u30fc\u30b9\u306e\u30d9\u30af\u30bf\u30fc\u753b\u50cf\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3067\u3059\u3002<br \/>\u4ee5\u4e0b\u306e\u30c6\u30fc\u30d6\u30eb\u306f\u3001\u4e3b\u8981\u306aSVG\u56f3\u5f62\u8981\u7d20\u3068\u305d\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u3001\u304a\u3088\u3073HTML\u30b3\u30fc\u30c9\u306e\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n<table>\n\t<thead>\n\t\t<tr><th class=\"col-name-desc\">\u8981\u7d20\u540d \/ \u8aac\u660e<\/th><th>\u4e3b\u8981\u306a\u5c5e\u6027 \/ \u8a18\u8ff0\u4f8b<\/th><\/tr>\n\t<\/thead>\n\t<tbody>\n\t<tr>\n\t\t<td class=\"col-name-desc\"><code>&lt;rect&gt;<\/code><br \/>\u56db\u89d2\u5f62\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/td>\n\t\t<td>\n\t\t\t<div class=\"code-block\"><code>&lt;rect x=\"10\" y=\"10\" width=\"80\" height=\"60\" fill=\"blue\" \/&gt;<\/code><\/div>\n\t\t\t<ul class=\"attribute-list\">\n\t\t\t<li><code>x, y<\/code>: \u56db\u89d2\u5f62\u306e\u5de6\u4e0a\u9685\u306e\u5ea7\u6a19<\/li>\n\t\t\t<li><code>width, height<\/code>: \u5e45\u3068\u9ad8\u3055<\/li>\n\t\t\t<li><code>rx, ry<\/code>: \u89d2\u306e\u4e38\u307f\uff08\u7701\u7565\u53ef\u80fd\uff09<\/li>\n\t\t\t<\/ul>\n\t\t<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td class=\"col-name-desc\"><code>&lt;circle&gt;<\/code><br \/>\u5186\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/td>\n\t\t<td>\n\t\t\t<div class=\"code-block\"><code>&lt;circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" \/&gt;<\/code><\/div>\n\t\t\t<ul class=\"attribute-list\">\n\t\t\t\t<li><code>cx, cy<\/code>: \u5186\u306e\u4e2d\u5fc3\u306e\u5ea7\u6a19<\/li>\n\t\t\t\t<li><code>r<\/code>: \u534a\u5f84<\/li>\n\t\t\t<\/ul>\n\t\t<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td class=\"col-name-desc\"><code>&lt;ellipse&gt;<\/code><br \/>\u6955\u5186\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/td>\n\t\t<td>\n\t\t\t<div class=\"code-block\"><code>&lt;ellipse cx=\"100\" cy=\"50\" rx=\"80\" ry=\"30\" fill=\"green\" \/&gt;<\/code><\/div>\n\t\t\t<ul class=\"attribute-list\">\n\t\t\t<li><code>cx, cy<\/code>: \u6955\u5186\u306e\u4e2d\u5fc3\u306e\u5ea7\u6a19<\/li>\n\t\t\t<li><code>rx, ry<\/code>: X\u8ef8\u3068Y\u8ef8\u306e\u534a\u5f84<\/li>\n\t\t<\/ul>\n\t\t<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td class=\"col-name-desc\"><code>&lt;line&gt;<\/code><br \/>\u76f4\u7dda\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/td>\n\t\t<td>\n\t\t\t<div class=\"code-block\"><code>&lt;line x1=\"10\" y1=\"10\" x2=\"90\" y2=\"90\" stroke=\"black\" stroke-width=\"2\" \/&gt;<\/code><\/div>\n\t\t\t<ul class=\"attribute-list\">\n\t\t\t<li><code>x1, y1<\/code>: \u7dda\u306e\u958b\u59cb\u5ea7\u6a19<\/li>\n\t\t\t<li><code>x2, y2<\/code>: \u7dda\u306e\u7d42\u4e86\u5ea7\u6a19<\/li>\n\t\t<\/ul>\n\t\t<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td class=\"col-name-desc\"><code>&lt;polyline&gt;<\/code><br \/>\u8907\u6570\u306e\u70b9\u3092\u901a\u308b\u6298\u308c\u7dda\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/td>\n\t\t<td>\n\t\t\t<div class=\"code-block\"><code>&lt;polyline points=\"10,10 20,40 30,10\" fill=\"none\" stroke=\"purple\" \/&gt;<\/code><\/div>\n\t\t\t<ul class=\"attribute-list\">\n\t\t\t<li><code>points<\/code>: \u8907\u6570\u306e\u5ea7\u6a19\u306e\u30da\u30a2\u3092\u30ab\u30f3\u30de\u307e\u305f\u306f\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u3063\u3066\u8a18\u8ff0<\/li>\n\t\t<\/ul>\n\t\t<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td class=\"col-name-desc\"><code>&lt;polygon&gt;<\/code><br \/>\u8907\u6570\u306e\u70b9\u3092\u901a\u308b\u591a\u89d2\u5f62\u3092\u63cf\u753b\u3057\u3001\u81ea\u52d5\u7684\u306b\u59cb\u70b9\u3068\u7d42\u70b9\u3092\u7d50\u3073\u307e\u3059\u3002<\/td>\n\t\t<td>\n\t\t\t<div class=\"code-block\"><code>&lt;polygon points=\"100,10 40,198 190,78\" fill=\"yellow\" stroke=\"black\" \/&gt;<\/code><\/div>\n\t\t\t<ul class=\"attribute-list\">\n\t\t\t<li><code>points<\/code>: \u8907\u6570\u306e\u5ea7\u6a19\u306e\u30da\u30a2\u3092\u30ab\u30f3\u30de\u307e\u305f\u306f\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u3063\u3066\u8a18\u8ff0<\/li>\n\t\t\t<\/ul>\n\t\t<\/td>\n\t<\/tr>\n\t<tr>\n\t<td class=\"col-name-desc\"><code>&lt;path&gt;<\/code><br \/>\u6700\u3082\u67d4\u8edf\u306a\u8981\u7d20\u3067\u3001\u8907\u96d1\u306a\u5f62\u72b6\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/td>\n\t<td>\n\t\t<div class=\"code-block\"><code>&lt;path d=\"M 10 80 Q 52.5 10 95 80 T 180 80\" stroke=\"orange\" fill=\"transparent\" \/&gt;<\/code><\/div>\n\t\t<ul class=\"attribute-list\">\n\t\t<li><code>d<\/code>: \u30d1\u30b9\u306e\u63cf\u753b\u30b3\u30de\u30f3\u30c9<\/li>\n\t\t\t<table border=\"1\" class=\"path-option\">\n\t\t\t\t<tr><td>\n\t\t\t\t<b>M (moveto) <\/b><br \/>\n\t\t\t\t\u30da\u30f3\u306e\u73fe\u5728\u4f4d\u7f6e\u3092\u79fb\u52d5\u3055\u305b\u308b\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: M x y<br \/>\n\t\t\t\tx,y \u79fb\u52d5\u5148\u306e\u5ea7\u6a19\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<p><b>Q (quadratic bezier curveto)<\/b><br \/>\n\t\t\t\t\u4e8c\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda\u3092\u5b9a\u7fa9\u3002\u958b\u59cb\u70b9\u3001\u5236\u5fa1\u70b9\u3001\u7d42\u70b9\u306e3\u70b9\u306b\u3088\u308b\u66f2\u7dda\u3092\u6c7a\u307e\u308a\u307e\u3059\u3002\u5236\u5fa1\u70b9\u306f\u66f2\u7dda\u306e\u5f62\u72b6\u3092\u5f15\u3063\u5f35\u308b\u5f62\u3067\u66f2\u7dda\u3092\u5236\u5fa1\u3057\u307e\u3059\u3002<br \/>\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: Q cx cy x y<br \/>\n\t\t\t\tcx cy: \u5236\u5fa1\u70b9\u306e\u5ea7\u6a19<br \/>\n\t\t\t\tx y: \u7d42\u70b9\u306e\u5ea7\u6a19<\/p>\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<p><b>T (smooth quadratic bezier curveto)<\/b><br \/>\n\t\t\t\tT \u30b3\u30de\u30f3\u30c9\u3082\u4e8c\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u304c\u3001\u524d\u306e Q \u30b3\u30de\u30f3\u30c9\u307e\u305f\u306f T \u30b3\u30de\u30f3\u30c9\u306e\u5236\u5fa1\u70b9\u304b\u3089\u81ea\u52d5\u7684\u306b\u6ed1\u3089\u304b\u306a\u5236\u5fa1\u70b9\u3092\u8a08\u7b97<br \/>\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: T x y<br \/>\n\t\t\t\tx y: \u7d42\u70b9\u306e\u5ea7\u6a19<\/p>\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<b>L (lineto)<\/b><br \/>\n\t\t\t\t\u73fe\u5728\u306e\u70b9\u304b\u3089\u6307\u5b9a\u3055\u308c\u305f\u5ea7\u6a19\u307e\u3067\u76f4\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<br \/>\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: L x y\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<b>H (horizontal lineto): <\/b><br \/>\n\t\t\t\t\u73fe\u5728\u306e\u70b9\u306ey\u5ea7\u6a19\u3092\u7dad\u6301\u3057\u305f\u307e\u307e\u3001\u6307\u5b9a\u3055\u308c\u305fx\u5ea7\u6a19\u307e\u3067\u6c34\u5e73\u306a\u76f4\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<br \/>\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: H x\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<b>V (vertical lineto)<\/b><br \/>\n\t\t\t\t\u73fe\u5728\u306e\u70b9\u306ex\u5ea7\u6a19\u3092\u7dad\u6301\u3057\u305f\u307e\u307e\u3001\u6307\u5b9a\u3055\u308c\u305fy\u5ea7\u6a19\u307e\u3067\u5782\u76f4\u306a\u76f4\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<br \/>\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: V y<\/p>\n\t\t\t\t<p>\u66f2\u7dda\u63cf\u753b\u30b3\u30de\u30f3\u30c9<br \/>\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<b>C (cubic bezier curveto)<\/b><br \/>\n\t\t\t\t2\u3064\u306e\u5236\u5fa1\u70b9\u3092\u6301\u3064\u4e09\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u3088\u308a\u8907\u96d1\u3067\u6ed1\u3089\u304b\u306a\u66f2\u7dda\u3092\u5f15\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: C c1x c1y c2x c2y x y<br \/>\n\t\t\t\tc1x c1y: \u6700\u521d\u306e\u5236\u5fa1\u70b9\u306e\u5ea7\u6a19<br \/>\n\t\t\t\tc2x c2y: 2\u756a\u76ee\u306e\u5236\u5fa1\u70b9\u306e\u5ea7\u6a19<br \/>\n\t\t\t\tx y: \u7d42\u70b9\u306e\u5ea7\u6a19<\/p>\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<b>S (smooth cubic bezier curveto)<\/b><br \/>\n\t\t\t\t\u524d\u306eC\u30b3\u30de\u30f3\u30c9\u307e\u305f\u306fS\u30b3\u30de\u30f3\u30c9\u304b\u3089\u6ed1\u3089\u304b\u306a\u4e09\u6b21\u30d9\u30b8\u30a7\u66f2\u7dda\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u6700\u521d\u306e\u5236\u5fa1\u70b9\u306f\u81ea\u52d5\u7684\u306b\u8a08\u7b97\u3055\u308c\u30012\u756a\u76ee\u306e\u5236\u5fa1\u70b9\u3068\u7d42\u70b9\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: S c2x c2y x y\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<p><b>A (elliptical arc)<\/b><br \/>\n\t\t\t\t\u6955\u5186\u306e\u4e00\u90e8\uff08\u5186\u5f27\uff09\u3092\u63cf\u304d\u307e\u3059\u3002\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u5186\u5f27\u306e\u534a\u5f84\u3001\u56de\u8ee2\u3001\u30b9\u30a4\u30fc\u30d7\uff08\u6642\u8a08\u56de\u308a\u304b\u53cd\u6642\u8a08\u56de\u308a\u304b\uff09\u3001\u7d42\u70b9\u306a\u3069\u591a\u304f\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: A rx ry x-axis-rotation large-arc-flag sweep-flag x y<\/p>\n\t\t\t\t<\/td><\/tr>\n\n\t\t\t\t<tr><td>\n\t\t\t\t<b>Z (closepath)<\/b><br \/>\n\t\t\t\t\u73fe\u5728\u306e\u70b9\u304b\u3089\u30d1\u30b9\u306e\u958b\u59cb\u70b9\u307e\u3067\u76f4\u7dda\u3092\u5f15\u3044\u3066\u3001\u30d1\u30b9\u3092\u9589\u3058\u307e\u3059\u3002<br \/>\n\t\t\t\t<\/td><td>\n\t\t\t\t\u69cb\u6587: Z\n\t\t\t\t<\/td><\/tr>\n\t\t\t\t<tr><td colspan=\"2\">\n\t\t\t\t\u6ce8\u8a18:<br \/>\n\t\t\t\t\u3059\u3079\u3066\u306e\u30b3\u30de\u30f3\u30c9\u306b\u306f\u3001\u5927\u6587\u5b57\u3068\u5c0f\u6587\u5b57\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u3042\u308a\u3001\u5927\u6587\u5b57\u306e\u30b3\u30de\u30f3\u30c9 (M, L, C\u306a\u3069) \u306f\u7d76\u5bfe\u5ea7\u6a19\u3001\u5c0f\u6587\u5b57\u306e\u30b3\u30de\u30f3\u30c9 (m, l, c\u306a\u3069) \u306f\u3001\u73fe\u5728\u306e\u70b9\u304b\u3089\u306e\u76f8\u5bfe\u5ea7\u6a19\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u305f\u3068\u3048\u3070\u3001l 10 10\u306f\u3001\u73fe\u5728\u306e\u70b9\u304b\u3089\u53f3\u306b10\u3001\u4e0b\u306b10\u79fb\u52d5\u3057\u305f\u4f4d\u7f6e\u306b\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002\n\t\t\t\t<\/td><\/tr>\n\t\t\t<\/table>\n\t\t<\/ul>\n\t<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td class=\"col-name-desc\"><code>&lt;text&gt;<\/code><br \/>\u6587\u5b57\u3092\u63cf\u753b\u3057\u307e\u3059\u3002<\/td>\n\t\t<td>\n\t\t\t<div class=\"code-block\"><code>&lt;text x=\"10\" y=\"20\" fill=\"cyan\"&gt;Hello SVG&lt;\/text&gt;<\/code><\/div>\n\t\t\t<ul class=\"attribute-list\">\n\t\t\t<li><code>x, y<\/code>: \u6587\u5b57\u5217\u306e\u958b\u59cb\u5ea7\u6a19<\/li>\n\t\t\t<li><code>font-size<\/code>: \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba<\/li>\n\t\t\t<\/ul>\n\t\t<\/td>\n\t<\/tr>\n\n\t<\/tbody>\n\t<\/table>\n<!-- \/wp:post-content -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">SVG Work bench<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:html -->\n<style>\n        .canvas-container {\n            position: relative;\n            border: 1px solid #ccc;\n            background-color: #fff;\n            box-shadow: 0 0 5px rgba(0,0,0,0.1);\n            margin-bottom: 20px;\n            cursor: crosshair;\n        }\n\n        #svg-canvas {\n            display: block;\n        }\n\n        #coord-label {\n            position: absolute;\n            bottom: 5px;\n            left: 5px;\n            background-color: rgba(255, 255, 255, 0.7);\n            padding: 2px 5px;\n            border-radius: 3px;\n            font-size: 12px;\n            pointer-events: none; \/* SVG\u64cd\u4f5c\u306e\u90aa\u9b54\u306b\u306a\u3089\u306a\u3044\u3088\u3046\u306b *\/\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-bottom: 10px;\n        }\n\n        th, td {\n            border: 1px solid #ddd;\n            padding: 8px;\n            text-align: left;\n        }\n\n        th {\n            background-color: #eee;\n        }\n        \n        td {\n            background-color: #fff;\n        }\n\n        select, input[type=\"number\"], input[type=\"text\"], input[type=\"color\"] {\n            width: 100%;\n            box-sizing: border-box;\n            border: 1px solid #ccc;\n            padding: 4px;\n            border-radius: 3px;\n        }\n\n        input[disabled] {\n            background-color: #f0f0f0;\n            cursor: not-allowed;\n        }\n        \n        .selected-cell {\n            background-color: #ffdead !important; \/* \u8584\u3044\u30aa\u30ec\u30f3\u30b8 *\/\n        }\n\n        .svg-output {\n            margin-top: 20px;\n        }\n\n        #svg-code-output {\n            width: 100%;\n            height: 200px;\n            font-family: monospace;\n            white-space: pre;\n            overflow-x: auto;\n            border: 1px solid #ccc;\n            padding: 10px;\n            box-sizing: border-box;\n        }\n\n        .controls {\n            display: flex;\n            gap: 20px;\n            align-items: center;\n            margin-bottom: 10px;\n        }\n    <\/style>\n\n    <div class=\"canvas_settings\">\n        <label>\n            <input type=\"checkbox\" id=\"grid-checkbox\" checked>\n            \u30b0\u30ea\u30c3\u30c9\u8868\u793a\n        <\/label><br>\n        <label>\n            \u30ad\u30e3\u30f3\u30d0\u30b9\u30b5\u30a4\u30ba<br>\n            \u5e45\uff1a<input type=\"number\" style=\"width: 5rem;\" id=\"canvas-width\" value=\"400\" min=\"0\" max=\"999\">\n            \u9ad8\u3055:<input type=\"number\" style=\"width: 5rem;\" id=\"canvas-height\" value=\"400\" min=\"0\" max=\"999\">\n        <\/label>\n    <\/div>\n\n    <div class=\"canvas-container\">\n        <svg id=\"svg-canvas\" width=\"400\" height=\"400\"><\/svg>\n        <div id=\"coord-label\">X: 0, Y: 0<\/div>\n    <\/div>\n\n    <canvas_draws>\n        <h3>\u56f3\u5f62\u8a2d\u5b9a<\/h3>\n        <table id=\"shape-table\">\n            <thead>\n                <tr>\n                    <th style=\"width: 5rem;\">\u56f3\u5f62\u306e\u7a2e\u985e<\/th>\n                    <th style=\"width: 3rem;\">\u4f4d\u7f6eX<\/th>\n                    <th style=\"width: 3rem;\">\u4f4d\u7f6eY<\/th>\n                    <th style=\"width: 3rem;\">\u5e45<\/th>\n                    <th style=\"width: 3rem;\">\u9ad8\u3055<\/th>\n                    <th style=\"width: 3rem;\">\u7dda\u592a\u3055<\/th>\n                    <th style=\"width: 3rem;\">\u7dda\u306e\u8272<\/th>\n                    <th style=\"width: 3rem;\">\u5857\u8272<\/th>\n                    <th>\u30d1\u30e9\u30e1\u30fc\u30bf<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody><\/tbody>\n        <\/table>\n        <button id=\"add-row\">\u884c\u3092\u8ffd\u52a0<\/button>\n\n        <div class=\"svg-output\">\n            <h3>SVG\u5b9a\u7fa9<\/h3>\n            <textarea id=\"svg-code-output\" readonly><\/textarea>\n        <\/div>\n\n        <footer>\n            <input type=\"file\" id=\"file-input\" accept=\".svg\" hidden>\n            <button id=\"load-svg\">\u8aad\u8fbc<\/button>\n            <button id=\"save-svg\">\u4fdd\u5b58<\/button>\n        <\/footer>\n    <\/main>\n\n    <script>\n            \/\/ \u5165\u529b\u6b04\u306e\u6709\u52b9\/\u7121\u52b9\u3092\u5207\u308a\u66ff\u3048\u308b\n            function updateInputStates(selectElement) {\n                const row = selectElement.closest('tr');\n                const type = selectElement.value;\n                const isPathLike = ['line', 'polyline', 'path'].includes(type);\n                const isText = type === 'text';\n                const isNone = type === '\u7121\u3057';\n                \n                const posInputs = row.querySelectorAll('.pos-x, .pos-y');\n                const sizeInputs = row.querySelectorAll('.shape-width, .shape-height');\n                const paramInput = row.querySelector('.param-input');\n                const strokeInput = row.querySelector('.stroke-width');\n\n                \/\/ \u30d1\u30b9\u7cfb\u3068\u30c6\u30ad\u30b9\u30c8\u4ee5\u5916\u306e\u5165\u529b\u6b04\u306e\u6709\u52b9\/\u7121\u52b9\n                posInputs.forEach(input => input.disabled = isPathLike || isNone);\n                sizeInputs.forEach(input => input.disabled = isPathLike || isNone);\n                \n                \/\/ \u30c6\u30ad\u30b9\u30c8\u306e\u5834\u5408\u3001\u5e45\u30fb\u9ad8\u3055\u306f\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3068\u3057\u3066\u4f7f\u3046\n                row.querySelector('.shape-width').disabled = isNone;\n                row.querySelector('.shape-height').disabled = isNone;\n                \n                \/\/ \u6587\u5b57\u306e\u5834\u5408\u3001\u7dda\u306e\u592a\u3055\u306f\u7121\u52b9\n                strokeInput.disabled = isText || isNone;\n\n                \/\/ \u30d1\u30e9\u30e1\u30fc\u30bf\u6b04\u306e\u6709\u52b9\/\u7121\u52b9\n                paramInput.disabled = isNone;\n                \n                \/\/ \u56f3\u5f62\u306e\u7a2e\u985e\u304c\u5909\u308f\u3063\u305f\u3089\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u30af\u30ea\u30a2\n                paramInput.value = '';\n            }\n\n        \/\/ SVG\u8981\u7d20\u306e\u751f\u6210\u3068\u5c5e\u6027\u8a2d\u5b9a\n        function createSvgElement(row) {\n            const shapeType = row.querySelector('.shape-type').value;\n            if (shapeType === '\u7121\u3057') return null;\n\n            const x = row.querySelector('.pos-x').value;\n            const y = row.querySelector('.pos-y').value;\n            const width = row.querySelector('.shape-width').value;\n            const height = row.querySelector('.shape-height').value;\n            const strokeWidth = row.querySelector('.stroke-width').value;\n            const strokeColor = row.querySelector('.stroke-color').value;\n            const fillColor = row.querySelector('.fill-color').value;\n            const param = row.querySelector('.param-input').value;\n            \n            let svgEl;\n            try {\n                svgEl = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', shapeType);\n            } catch (e) {\n                console.error(\"Invalid shape type:\", shapeType);\n                return null;\n            }\n\n            \/\/ Set attributes based on shape type\n            switch (shapeType) {\n                case 'rect':\n                    svgEl.setAttribute('x', x);\n                    svgEl.setAttribute('y', y);\n                    svgEl.setAttribute('width', width);\n                    svgEl.setAttribute('height', height);\n                    break;\n                case 'circle':\n                    svgEl.setAttribute('cx', x);\n                    svgEl.setAttribute('cy', y);\n                    svgEl.setAttribute('r', width);\n                    break;\n                case 'ellipse':\n                    svgEl.setAttribute('cx', x);\n                    svgEl.setAttribute('cy', y);\n                    svgEl.setAttribute('rx', width);\n                    svgEl.setAttribute('ry', height);\n                    break;\n                case 'line':\n                    const coordsLine = param.split(\/[, ]+\/).filter(Boolean).map(Number);\n                    if (coordsLine.length === 4) {\n                        svgEl.setAttribute('x1', coordsLine[0]);\n                        svgEl.setAttribute('y1', coordsLine[1]);\n                        svgEl.setAttribute('x2', coordsLine[2]);\n                        svgEl.setAttribute('y2', coordsLine[3]);\n                    } else {\n                        return null; \/\/ Don't draw incomplete lines\n                    }\n                    break;\n                case 'polyline':\n                    svgEl.setAttribute('points', param);\n                    svgEl.setAttribute('fill', 'none'); \/\/ Polyline always has no fill\n                    break;\n                case 'polygon':\n                    svgEl.setAttribute('points', param);\n                    break;\n                case 'path':\n                    svgEl.setAttribute('d', param);\n                    break;\n                case 'text':\n                    svgEl.setAttribute('x', x);\n                    svgEl.setAttribute('y', y);\n                    svgEl.setAttribute('font-size', width);\n                    svgEl.textContent = param;\n                    break;\n            }\n\n            \/\/ Set common attributes\n            if (shapeType === 'text') {\n                svgEl.setAttribute('fill', fillColor);\n            } else {\n                svgEl.setAttribute('fill', fillColor);\n                svgEl.setAttribute('stroke', strokeColor);\n                svgEl.setAttribute('stroke-width', strokeWidth);\n            }\n            \n            return svgEl;\n        }\n\n        \/\/ \u65b0\u3057\u3044\u884c\u306e\u8ffd\u52a0\n        function addRow() {\n            const shapeTableBody = document.querySelector('#shape-table tbody');\n            const newRow = document.createElement('tr');\n            newRow.innerHTML = `\n                <td>\n                    <select class=\"shape-type\">\n                        <option value=\"\u7121\u3057\">\u7121\u3057<\/option>\n                        <option value=\"rect\">rect<\/option>\n                        <option value=\"circle\">circle<\/option>\n                        <option value=\"ellipse\">ellipse<\/option>\n                        <option value=\"line\">line<\/option>\n                        <option value=\"polyline\">polyline<\/option>\n                        <option value=\"polygon\">polygon<\/option>\n                        <option value=\"path\">path<\/option>\n                        <option value=\"text\">text<\/option>\n                    <\/select>\n                <\/td>\n                <td class=\"pos-x-td\"><input type=\"number\" class=\"pos-x\" value=\"30\" min=\"0\" max=\"999\"><\/td>\n                <td class=\"pos-y-td\"><input type=\"number\" class=\"pos-y\" value=\"30\" min=\"0\" max=\"999\"><\/td>\n                <td class=\"width-td\"><input type=\"number\" class=\"shape-width\" value=\"30\" min=\"0\" max=\"999\"><\/td>\n                <td class=\"height-td\"><input type=\"number\" class=\"shape-height\" value=\"30\" min=\"0\" max=\"999\"><\/td>\n                <td class=\"stroke-td\"><input type=\"number\" class=\"stroke-width\" value=\"1\" min=\"0\" max=\"99\"><\/td>\n                <td><input type=\"color\" class=\"stroke-color\" value=\"#000000\"><\/td>\n                <td><input type=\"color\" class=\"fill-color\" value=\"#ffffff\"><\/td>\n                <td class=\"param-td\"><input type=\"text\" class=\"param-input\"><\/td>\n            `;\n            shapeTableBody.appendChild(newRow);\n            updateInputStates(newRow.querySelector('.shape-type'));\n        }\n    <\/script>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            const gridCheckbox = document.getElementById('grid-checkbox');\n            const canvasWidthInput = document.getElementById('canvas-width');\n            const canvasHeightInput = document.getElementById('canvas-height');\n            const svgCanvas = document.getElementById('svg-canvas');\n            const coordLabel = document.getElementById('coord-label');\n            const shapeTableBody = document.querySelector('#shape-table tbody');\n            const addRowBtn = document.getElementById('add-row');\n            const svgCodeOutput = document.getElementById('svg-code-output');\n            const loadSvgBtn = document.getElementById('load-svg');\n            const fileInput = document.getElementById('file-input');\n            const saveSvgBtn = document.getElementById('save-svg');\n\n            let selectedCell = null; \/\/ \u9078\u629e\u3055\u308c\u305f\u30bb\u30eb\u3092\u4fdd\u6301\n\n            \/\/ \u30b0\u30ea\u30c3\u30c9\u8868\u793a\u306e\u66f4\u65b0\n            function updateGrid() {\n                \/\/ Remove existing grid lines\n                const gridLines = svgCanvas.querySelectorAll('.grid');\n                gridLines.forEach(line => line.remove());\n\n                if (gridCheckbox.checked) {\n                    const width = parseInt(svgCanvas.getAttribute('width'));\n                    const height = parseInt(svgCanvas.getAttribute('height'));\n\n                    \/\/ Vertical lines\n                    for (let i = 10; i < width; i += 10) {\n                        const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n                        line.setAttribute('x1', i);\n                        line.setAttribute('y1', 0);\n                        line.setAttribute('x2', i);\n                        line.setAttribute('y2', height);\n                        line.setAttribute('stroke', '#add8e6');\n                        line.setAttribute('stroke-dasharray', '1,2');\n                        line.classList.add('grid');\n                        svgCanvas.appendChild(line);\n                    }\n                    \/\/ Horizontal lines\n                    for (let i = 10; i < height; i += 10) {\n                        const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n                        line.setAttribute('x1', 0);\n                        line.setAttribute('y1', i);\n                        line.setAttribute('x2', width);\n                        line.setAttribute('y2', i);\n                        line.setAttribute('stroke', '#add8e6');\n                        line.setAttribute('stroke-dasharray', '1,2');\n                        line.classList.add('grid');\n                        svgCanvas.appendChild(line);\n                    }\n                }\n                renderSvg();\n            }\n\n            \/\/ SVG\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u30b5\u30a4\u30ba\u66f4\u65b0\n            function updateCanvasSize() {\n                const width = Math.max(0, Math.min(999, parseInt(canvasWidthInput.value)));\n                const height = Math.max(0, Math.min(999, parseInt(canvasHeightInput.value)));\n                svgCanvas.setAttribute('width', width);\n                svgCanvas.setAttribute('height', height);\n                updateGrid();\n            }\n\n            \/\/ SVG\u5b9a\u7fa9\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u3068SVG\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u66f4\u65b0\n            function renderSvg() {\n                \/\/ Clear SVG canvas except for grid lines\n                const elements = svgCanvas.querySelectorAll(':not(.grid)');\n                elements.forEach(el => el.remove());\n\n                const rows = shapeTableBody.querySelectorAll('tr');\n                const svgContent = [];\n\n                rows.forEach(row => {\n                    const svgEl = createSvgElement(row);\n                    if (svgEl) {\n                        svgCanvas.appendChild(svgEl);\n                        \/\/ Get the outer HTML of the new element and format it\n                        const outerHTML = svgEl.outerHTML;\n                        const formattedHTML = outerHTML.replace(\/><\/g, '>\\n    <');\n                        svgContent.push(formattedHTML);\n                    }\n                });\n\n                const fullSvg = `<svg width=\"${svgCanvas.getAttribute('width')}\" height=\"${svgCanvas.getAttribute('height')}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\\n  ${svgContent.join('\\n  ')}\\n<\/svg>`;\n                svgCodeOutput.value = fullSvg;\n            }\n\n            \/\/ \u5165\u529b\u6b04\u306e\u6709\u52b9\/\u7121\u52b9\u3092\u5207\u308a\u66ff\u3048\u308b\n            function updateInputStates(selectElement) {\n                const row = selectElement.closest('tr');\n                const type = selectElement.value;\n                const isPathLike = ['line', 'polyline', 'path'].includes(type);\n                const isText = type === 'text';\n                const isNone = type === '\u7121\u3057';\n                \n                const posInputs = row.querySelectorAll('.pos-x, .pos-y');\n                const sizeInputs = row.querySelectorAll('.shape-width, .shape-height');\n                const paramInput = row.querySelector('.param-input');\n                const strokeInput = row.querySelector('.stroke-width');\n\n                \/\/ \u30d1\u30b9\u7cfb\u3068\u30c6\u30ad\u30b9\u30c8\u4ee5\u5916\u306e\u5165\u529b\u6b04\u306e\u6709\u52b9\/\u7121\u52b9\n                posInputs.forEach(input => input.disabled = isPathLike || isNone);\n                sizeInputs.forEach(input => input.disabled = isPathLike || isNone);\n                \n                \/\/ \u30c6\u30ad\u30b9\u30c8\u306e\u5834\u5408\u3001\u5e45\u30fb\u9ad8\u3055\u306f\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3068\u3057\u3066\u4f7f\u3046\n                row.querySelector('.shape-width').disabled = isNone;\n                row.querySelector('.shape-height').disabled = isNone;\n                \n                \/\/ \u6587\u5b57\u306e\u5834\u5408\u3001\u7dda\u306e\u592a\u3055\u306f\u7121\u52b9\n                strokeInput.disabled = isText || isNone;\n\n                \/\/ \u30d1\u30e9\u30e1\u30fc\u30bf\u6b04\u306e\u6709\u52b9\/\u7121\u52b9\n                paramInput.disabled = isNone;\n                \n                \/\/ \u56f3\u5f62\u306e\u7a2e\u985e\u304c\u5909\u308f\u3063\u305f\u3089\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u30af\u30ea\u30a2\n                paramInput.value = '';\n            }\n\n            \/\/ \u30bb\u30eb\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u306e\u51e6\u7406\n            function handleCellClick(e) {\n                const td = e.target.closest('td');\n                if (!td) return;\n                \n                \/\/ Reset previous selection\n                if (selectedCell) {\n                    selectedCell.classList.remove('selected-cell');\n                    if (selectedCell.classList.contains('pos-x-td')) {\n                        selectedCell.nextElementSibling.classList.remove('selected-cell');\n                    }\n                }\n                selectedCell = null;\n\n                const row = td.closest('tr');\n                const shapeType = row.querySelector('.shape-type').value;\n\n                if (['line', 'polyline', 'polygon', 'path'].includes(shapeType) && td.classList.contains('param-td')) {\n                    td.classList.add('selected-cell');\n                    selectedCell = td;\n                } else if (['rect', 'circle', 'ellipse', 'text'].includes(shapeType)) {\n                    if (td.classList.contains('pos-x-td')) {\n                        td.classList.add('selected-cell');\n                        td.nextElementSibling.classList.add('selected-cell');\n                        selectedCell = td;\n                    }\n                }\n            }\n\n            \/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u8a2d\u5b9a\n            gridCheckbox.addEventListener('change', updateGrid);\n            canvasWidthInput.addEventListener('input', updateCanvasSize);\n            canvasHeightInput.addEventListener('input', updateCanvasSize);\n            addRowBtn.addEventListener('click', addRow);\n            \n            shapeTableBody.addEventListener('change', (e) => {\n                if (e.target.classList.contains('shape-type')) {\n                    updateInputStates(e.target);\n                }\n                renderSvg();\n            });\n\n            shapeTableBody.addEventListener('input', (e) => {\n                if (e.target.tagName === 'INPUT') {\n                    renderSvg();\n                }\n            });\n\n            shapeTableBody.addEventListener('click', handleCellClick);\n            \n            svgCanvas.addEventListener('mousemove', (e) => {\n                const x = e.offsetX;\n                const y = e.offsetY;\n                coordLabel.textContent = `X: ${x}, Y: ${y}`;\n            });\n\n            svgCanvas.addEventListener('mousedown', (e) => {\n                if (!selectedCell) return;\n\n                const x = e.offsetX;\n                const y = e.offsetY;\n                const row = selectedCell.closest('tr');\n                const shapeType = row.querySelector('.shape-type').value;\n\n                if (selectedCell.classList.contains('pos-x-td')) {\n                    \/\/ Position X and Y selected\n                    const pos_x_input = row.querySelector('.pos-x');\n                    const pos_y_input = row.querySelector('.pos-y');\n                    pos_x_input.value = x;\n                    pos_y_input.value = y;\n                } else if (selectedCell.classList.contains('param-td')) {\n                    \/\/ Parameter cell selected\n                    const paramInput = row.querySelector('.param-input');\n                    let currentValue = paramInput.value.trim();\n                    \n                    if (shapeType === 'line') {\n                        const coords = currentValue.split(\/[, ]+\/).filter(Boolean);\n                        if (coords.length < 4) {\n                             paramInput.value += `${currentValue.length > 0 ? ',' : ''}${x},${y}`;\n                        } else {\n                            paramInput.value = `${coords[0]},${coords[1]},${x},${y}`;\n                        }\n                    } else if (shapeType === 'path') {\n                        const command = e.shiftKey ? 'M' : 'L';\n                        if (currentValue === '') {\n                            paramInput.value = `M ${x} ${y}`;\n                        } else {\n                            paramInput.value += ` ${command} ${x} ${y}`;\n                        }\n                    } else { \/\/ For polyline and polygon\n                        if (currentValue === '') {\n                            paramInput.value = `${x},${y}`;\n                        } else {\n                            paramInput.value += ` ${x},${y}`;\n                        }\n                    }\n                }\n                renderSvg();\n            });\n\n            \/\/ \u30d5\u30a1\u30a4\u30eb\u8aad\u8fbc\n            loadSvgBtn.addEventListener('click', () => {\n                fileInput.click();\n            });\n\n            fileInput.addEventListener('change', (e) => {\n                const file = e.target.files[0];\n                if (!file) return;\n\n                const reader = new FileReader();\n                reader.onload = (event) => {\n                    const svgContent = event.target.result;\n                    alert('SVG\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u6a5f\u80fd\u306f\u73fe\u5728\u958b\u767a\u4e2d\u3067\u3059\u3002');\n                    \/\/ TODO: Implement parsing logic here\n                };\n                reader.readAsText(file);\n            });\n\n            \/\/ \u30d5\u30a1\u30a4\u30eb\u4fdd\u5b58\n            saveSvgBtn.addEventListener('click', () => {\n                const svgCode = svgCodeOutput.value;\n                if (!svgCode) {\n                    alert('\u4fdd\u5b58\u3059\u308bSVG\u306e\u5185\u5bb9\u304c\u3042\u308a\u307e\u305b\u3093\u3002');\n                    return;\n                }\n                \n                const blob = new Blob([svgCode], { type: 'image\/svg+xml' });\n                const url = URL.createObjectURL(blob);\n                const a = document.createElement('a');\n                a.href = url;\n                a.download = 'my-drawing.svg';\n                document.body.appendChild(a);\n                a.click();\n                document.body.removeChild(a);\n                URL.revokeObjectURL(url);\n            });\n\n            \/\/ Initial setup\n            addRow();\n            updateCanvasSize();\n        });\n    <\/script>\n\n\n\n<!-- \/wp:html -->","protected":false},"excerpt":{"rendered":"<p>SVG\uff08Scalable Vector Graphics\uff09\u306f\u3001\u30a6\u30a7\u30d6\u4e0a\u3067\u30d9\u30af\u30bf\u30fc\u753b\u50cf\u3092\u6271\u3046\u305f\u3081\u306eXML\u30d9\u30fc\u30b9\u306e\u8a00\u8a9e\u3067\u3059\u3002 SVG\u306e\u4e3b\u306a\u7279\u5fb4\u306f\u4ee5\u4e0b\u306e\u901a\u308a \u62e1\u5927\u30fb\u7e2e\u5c0f\u306b\u5f37\u3044: SVG\u306f\u70b9\u3001\u7dda\u3001\u591a\u89d2\u5f62\u306a\u3069\u306e\u6570\u5b66\u7684\u306a\u30c7\u30fc\u30bf\u3067\u753b\u50cf [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-345","post","type-post","status-publish","format-standard","hentry","category-other"],"acf":[],"_links":{"self":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=345"}],"version-history":[{"count":35,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/345\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/345\/revisions\/391"}],"wp:attachment":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}