[css-borders-4][editorial] Simplify the SVG markup

tabatkins · tabatkins · commit 4543588ab82b · 2025-06-05T16:58:13.000-07:00
diff --git a/css-borders-4/images/corner-shape-adjusting.svg b/css-borders-4/images/corner-shape-adjusting.svg
@@ -1,210 +1,43 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   width="76.724533mm"
-   height="67.854446mm"
-   viewBox="0 0 76.724533 67.854447"
-   version="1.1"
-   id="svg1"
-   inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
-   sodipodi:docname="corner-shape-target-unit-vector-scoop.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   viewBox="0 0 76 68"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     showguides="false"
-     inkscape:zoom="1.5144501"
-     inkscape:cx="10.895044"
-     inkscape:cy="122.15655"
-     inkscape:window-width="2000"
-     inkscape:window-height="1027"
-     inkscape:window-x="0"
-     inkscape:window-y="25"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1">
-    <inkscape:path-effect
-       effect="bspline"
-       id="path-effect9"
-       is_visible="true"
-       lpeversion="1.3"
-       weight="33.333333"
-       steps="2"
-       helper_size="0"
-       apply_no_weight="true"
-       apply_with_weight="true"
-       only_selected="false"
-       uniform="false" />
-    <linearGradient
-       id="swatch5"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop5" />
-    </linearGradient>
-    <inkscape:path-effect
-       effect="bspline"
-       id="path-effect9-1"
-       is_visible="true"
-       lpeversion="1.3"
-       weight="33.333333"
-       steps="2"
-       helper_size="0"
-       apply_no_weight="true"
-       apply_with_weight="true"
-       only_selected="false"
-       uniform="false" />
-  </defs>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-129.62674,-12.133553)">
-    <path
-       style="fill:none;fill-opacity:1;stroke:#44a53e;stroke-width:3.48543;stroke-dasharray:none;stroke-opacity:1"
-       d="M 198.06245,73.544621 C 137.01385,63.877494 134.30976,11.669043 134.30976,11.669043"
-       id="path1-2"
-       sodipodi:nodetypes="cc" />
-    <path
-       style="fill:none;stroke:#6f6f6f;stroke-width:3.00188;stroke-dasharray:none;stroke-opacity:1"
-       d="M 195.48426,75.052153 C 144.76022,66.421714 133.36838,16.380666 133.36838,16.380666"
-       id="path1"
-       sodipodi:nodetypes="cc" />
-    <text
-       xml:space="preserve"
-       style="font-size:3.175px;line-height:0.4;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#2aac39;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none;stroke-opacity:1"
-       x="174.28171"
-       y="36.048309"
-       id="text3"><tspan
-         sodipodi:role="line"
-         style="fill:#2aac39;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="174.28171"
-         y="36.048309"
-         id="tspan4">Shadow/clip Spread direction</tspan><tspan
-         sodipodi:role="line"
-         style="fill:#2aac39;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="174.28171"
-         y="37.31831"
-         id="tspan10"></tspan><tspan
-         sodipodi:role="line"
-         style="fill:#2aac39;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="174.83981"
-         y="38.58831"
-         id="tspan11"> </tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-size:3.175px;line-height:0.4;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#7ede88;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none;stroke-opacity:1"
-       x="145.83183"
-       y="16.129513"
-       id="text3-9"><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="145.83183"
-         y="16.129513"
-         id="tspan4-5">Border</tspan><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="145.83183"
-         y="17.399513"
-         id="tspan6"></tspan><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="145.83183"
-         y="18.669514"
-         id="tspan7">width</tspan><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="145.83183"
-         y="19.939512"
-         id="tspan8"></tspan><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="145.83183"
-         y="21.209513"
-         id="tspan9">direction</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-size:3.175px;line-height:0.4;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#7ede88;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none;stroke-opacity:1"
-       x="195.03636"
-       y="64.481644"
-       id="text3-9-7"><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="195.03636"
-         y="64.481644"
-         id="tspan4-5-3">Border</tspan><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="195.03636"
-         y="65.751648"
-         id="tspan6-4" /><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="195.03636"
-         y="67.021645"
-         id="tspan7-3">width</tspan><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="195.03636"
-         y="68.291649"
-         id="tspan8-0" /><tspan
-         sodipodi:role="line"
-         style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0.2;stroke-dasharray:none"
-         x="195.03636"
-         y="69.561646"
-         id="tspan9-4">direction</tspan></text>
-    <path
-       style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
-       d="m 133.67503,22.661827 -1.69767,-5.861307 6.52678,1.067376 z"
-       id="path14-8"
-       sodipodi:nodetypes="cccc"
-       inkscape:transform-center-x="1.0482353" />
-    <path
-       style="fill:#c87ede;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
-       d="m 193.98171,76.13758 -6.67679,-1.318955 4.51766,-3.300271 z"
-       id="path14-8-1"
-       sodipodi:nodetypes="cccc"
-       inkscape:transform-center-x="1.0482353" />
-    <path
-       style="fill:#45cf4d;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
-       d="m 170.86286,47.074533 -4.29039,-1.756081 4.34785,-2.252814 z"
-       id="path14-8-8"
-       sodipodi:nodetypes="cccc"
-       inkscape:transform-center-x="1.9575957"
-       inkscape:transform-center-y="0.30635793" />
-    <path
-       style="fill:#45cf4d;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
-       d="m 175.12486,43.337186 4.3478,1.608693 -4.26846,2.399829 z"
-       id="path14-8-8-8"
-       sodipodi:nodetypes="cccc"
-       inkscape:transform-center-x="-1.9362893"
-       inkscape:transform-center-y="-0.29977958" />
-    <path
-       style="fill:#45cf4d;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
-       d="m 171.13191,43.051564 1.85434,-4.248847 2.15217,4.398535 z"
-       id="path14-8-8-1"
-       sodipodi:nodetypes="cccc"
-       inkscape:transform-center-x="0.31059569"
-       inkscape:transform-center-y="-1.9439231" />
-    <path
-       style="fill:#45cf4d;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
-       d="m 175.15575,47.577566 -1.70831,4.309633 -2.30098,-4.322549 z"
-       id="path14-8-8-8-1"
-       sodipodi:nodetypes="cccc"
-       inkscape:transform-center-x="-0.30425242"
-       inkscape:transform-center-y="1.9638262" />
-  </g>
+   font-family="sans-serif"
+   font-size="3.175">
+<g>
+   <g fill="none">
+      <path stroke="#44a53e" stroke-width="3"
+          d="M 69,61 c -61,-10 -64,-62 -64,-62" />
+      <path stroke="#6f6f6f" stroke-width="3"
+          d="M 66,63 c -51,-9 -62,-59 -62,-59" />
+   </g>
+   <g>
+      <text text-anchor="middle" fill="#2aac39" x="45" y ="24">
+         Shadow/clip Spread Direction
+      </text>
+      <g transform="translate(45, 32)" fill="#45cf4d">
+         <path d="M 0 0 m -2 -2 l 2 -4 l 2 4 h -4 z"/>
+         <path d="M 0 0 m -2 -2 l 2 -4 l 2 4 h -4 z" transform="rotate(90)"/>
+         <path d="M 0 0 m -2 -2 l 2 -4 l 2 4 h -4 z" transform="rotate(180)"/>
+         <path d="M 0 0 m -2 -2 l 2 -4 l 2 4 h -4 z" transform="rotate(270)"/>
+      </g>
+   </g>
+   <g transform="translate(16, 4)">
+      <text fill="#c87ede" text-anchor="middle" x="0" y="0">
+         <tspan x="0" dy="0">Border</tspan>
+         <tspan x="0" dy="3">width</tspan>
+         <tspan x="0" dy="3">direction</tspan>
+      </text>
+   </g>
+   <g transform="translate(66, 51)">
+      <text fill="#c87ede" text-anchor="middle" x="0" y="0">
+         <tspan x="0" dy="0">Border</tspan>
+         <tspan x="0" dy="3">width</tspan>
+         <tspan x="0" dy="3">direction</tspan>
+      </text>
+   </g>
+   <g fill="#c87ede">
+      <path d="m 4.67503,10.661827 -1.69767,-5.861307 6.52678,1.067376 z"/>
+      <path d="m 64.98171,64.13758 -6.67679,-1.318955 4.51766,-3.300271 z"/>
+   </g>
+</g>
 </svg>
