t_wの輪郭

Feedlyでフォローするボタン

あれ

2022/11/22 20:31:00

さすがにデライトでSVGを埋め込むことはできないか。出来たらいろいろ遊べそう。いろいろとは?
とはいえ、手書きをSVGにすると、あっという間に1万字を超えてしまうので無理がある。

<svg> <line stroke="black" x1="224.8866424560547" y1="140.20484924316406" x2="229.4406280517578" y2="143.55357360839844" fill="none" stroke-width="0.2319902367889881"></line><line stroke="black" x1="221.40414428710938" y1="136.85618591308594" x2="224.8866424560547" y2="140.20484924316406" fill="none" stroke-width="0.22466422989964485"></line><line stroke="black" x1="217.38597106933594" y1="133.64144897460938" x2="221.40414428710938" y2="136.85618591308594" fill="none" stroke-width="0.24420026689767838"></line><line stroke="black" x1="213.23379516601562" y1="131.7661895751953" x2="217.38597106933594" y2="133.64144897460938" fill="none" stroke-width="0.27838829904794693"></line><line stroke="black" x1="213.23379516601562" y1="131.7661895751953" x2="213.23379516601562" y2="131.7661895751953" fill="none" stroke-width="0.27838829904794693"></line><line stroke="black" x1="209.75132751464844" y1="130.4267120361328" x2="213.23379516601562" y2="131.7661895751953" fill="none" stroke-width="0.38339439779520035"></line><line stroke="black" x1="206.67071533203125" y1="130.15882873535156" x2="209.75132751464844" y2="130.4267120361328" fill="none" stroke-width="0.5592186003923416"></line><line stroke="black" x1="203.3221435546875" y1="132.56988525390625" x2="206.67071533203125" y2="130.15882873535156" fill="none" stroke-width="0.8156288415193558"></line><line stroke="black" x1="199.9736785888672" y1="140.07086181640625" x2="203.3221435546875" y2="132.56988525390625" fill="none" stroke-width="1.1452992260456085"></line><line stroke="black" x1="196.62510681152344" y1="153.06378173828125" x2="199.9736785888672" y2="140.07086181640625" fill="none" stroke-width="1.616605669260025"></line><line stroke="black" x1="194.08023071289062" y1="171.54852294921875" x2="196.62510681152344" y2="153.06378173828125" fill="none" stroke-width="2.0073261857032776"></line><line stroke="black" x1="190.99961853027344" y1="194.18557739257812" x2="194.08023071289062" y2="171.54852294921875" fill="none" stroke-width="2.163614332675934"></line><line stroke="black" x1="188.72259521484375" y1="219.76956176757812" x2="190.99961853027344" y2="194.18557739257812" fill="none" stroke-width="2.3076924681663513"></line><line stroke="black" x1="186.57958984375" y1="247.0948028564453" x2="188.72259521484375" y2="219.76956176757812" fill="none" stroke-width="2.361416518688202"></line><line stroke="black" x1="185.10623168945312" y1="275.8934020996094" x2="186.57958984375" y2="247.0948028564453" fill="none" stroke-width="2.2881564497947693"></line><line stroke="black" x1="184.7043914794922" y1="305.3617858886719" x2="185.10623168945312" y2="275.8934020996094" fill="none" stroke-width="2.2979244589805603"></line><line stroke="black" x1="186.71353149414062" y1="333.75860595703125" x2="184.7043914794922" y2="305.3617858886719" fill="none" stroke-width="2.2686204314231873"></line><line stroke="black" x1="192.20506286621094" y1="359.61053466796875" x2="186.71353149414062" y2="333.75860595703125" fill="none" stroke-width="2.229548394680023"></line><line stroke="black" x1="201.98275756835938" y1="385.4622802734375" x2="192.20506286621094" y2="359.61053466796875" fill="none" stroke-width="2.251526415348053"></line><line stroke="black" x1="212.56411743164062" y1="400.1964416503906" x2="201.98275756835938" y2="385.4622802734375" fill="none" stroke-width="2.280830442905426"></line><line stroke="black" x1="229.03878784179688" y1="411.7159729003906" x2="212.56411743164062" y2="400.1964416503906" fill="none" stroke-width="2.293040454387665"></line><line stroke="black" x1="249.6656951904297" y1="415.6004333496094" x2="229.03878784179688" y2="411.7159729003906" fill="none" stroke-width="2.322344481945038"></line><line stroke="black" x1="269.3549499511719" y1="413.3233642578125" x2="249.6656951904297" y2="415.6004333496094" fill="none" stroke-width="2.3174604773521423"></line><line stroke="black" x1="283.95452880859375" y1="407.9654541015625" x2="269.3549499511719" y2="413.3233642578125" fill="none" stroke-width="2.310134470462799"></line><line stroke="black" x1="307.9299621582031" y1="394.5707092285156" x2="283.95452880859375" y2="407.9654541015625" fill="none" stroke-width="2.3052504658699036"></line><line stroke="black" x1="326.011962890625" y1="381.845703125" x2="307.9299621582031" y2="394.5707092285156" fill="none" stroke-width="2.3663005232810974"></line><line stroke="black" x1="342.21881103515625" y1="366.8436279296875" x2="326.011962890625" y2="381.845703125" fill="none" stroke-width="2.3931625485420227"></line><line stroke="black" x1="353.73773193359375" y1="354.9223327636719" x2="342.21881103515625" y2="366.8436279296875" fill="none" stroke-width="2.442002594470978"></line><line stroke="black" x1="366.7300109863281" y1="338.4468078613281" x2="353.73773193359375" y2="354.9223327636719" fill="none" stroke-width="2.55921870470047"></line><line stroke="black" x1="379.0525817871094" y1="316.0775146484375" x2="366.7300109863281" y2="338.4468078613281" fill="none" stroke-width="2.647130787372589"></line><line stroke="black" x1="386.4193115234375" y1="298.6644592285156" x2="379.0525817871094" y2="316.0775146484375" fill="none" stroke-width="2.698412835597992"></line><line stroke="black" x1="391.6430358886719" y1="281.7870788574219" x2="386.4193115234375" y2="298.6644592285156" fill="none" stroke-width="2.7912089228630066"></line><line stroke="black" x1="393.919921875" y1="265.4455261230469" x2="391.6430358886719" y2="281.7870788574219" fill="none" stroke-width="2.9206350445747375"></line><line stroke="black" x1="394.5896301269531" y1="250.7113494873047" x2="393.919921875" y2="265.4455261230469" fill="none" stroke-width="2.9987791180610657"></line><line stroke="black" x1="392.848388671875" y1="236.51292419433594" x2="394.5896301269531" y2="250.7113494873047" fill="none" stroke-width="3.025641143321991"></line><line stroke="black" x1="388.29437255859375" y1="223.52008056640625" x2="392.848388671875" y2="236.51292419433594" fill="none" stroke-width="3.0525031685829163"></line><line stroke="black" x1="382.80291748046875" y1="213.87586975097656" x2="388.29437255859375" y2="223.52008056640625" fill="none" stroke-width="3.086691200733185"></line><line stroke="black" x1="375.9718933105469" y1="207.3124237060547" x2="382.80291748046875" y2="213.87586975097656" fill="none" stroke-width="3.11355322599411"></line><line stroke="black" x1="368.0693664550781" y1="204.09768676757812" x2="375.9718933105469" y2="207.3124237060547" fill="none" stroke-width="3.1599512696266174"></line><line stroke="black" x1="359.36328125" y1="203.56190490722656" x2="368.0693664550781" y2="204.09768676757812" fill="none" stroke-width="3.2063493132591248"></line><line stroke="black" x1="351.862548828125" y1="206.10684204101562" x2="359.36328125" y2="203.56190490722656" fill="none" stroke-width="3.2405373454093933"></line><line stroke="black" x1="337.79876708984375" y1="216.28683471679688" x2="351.862548828125" y2="206.10684204101562" fill="none" stroke-width="3.294261395931244"></line><line stroke="black" x1="325.74407958984375" y1="231.2889404296875" x2="337.79876708984375" y2="216.28683471679688" fill="none" stroke-width="3.2967033982276917"></line><line stroke="black" x1="313.01971435546875" y1="250.97921752929688" x2="325.74407958984375" y2="231.2889404296875" fill="none" stroke-width="3.2307693362236023"></line><line stroke="black" x1="299.8934631347656" y1="274.4200439453125" x2="313.01971435546875" y2="250.97921752929688" fill="none" stroke-width="3.2161173224449158"></line><line stroke="black" x1="288.508544921875" y1="302.0131530761719" x2="299.8934631347656" y2="274.4200439453125" fill="none" stroke-width="3.2771673798561096"></line><line stroke="black" x1="279.4005432128906" y1="332.68701171875" x2="288.508544921875" y2="302.0131530761719" fill="none" stroke-width="3.3479854464530945"></line><line stroke="black" x1="272.971435546875" y1="364.70050048828125" x2="279.4005432128906" y2="332.68701171875" fill="none" stroke-width="3.35286945104599"></line><line stroke="black" x1="271.0962829589844" y1="396.7138977050781" x2="272.971435546875" y2="364.70050048828125" fill="none" stroke-width="3.4578755497932434"></line><line stroke="black" x1="272.8374328613281" y1="427.3878173828125" x2="271.0962829589844" y2="396.7138977050781" fill="none" stroke-width="3.560439646244049"></line><line stroke="black" x1="279.2665710449219" y1="454.1772766113281" x2="272.8374328613281" y2="427.3878173828125" fill="none" stroke-width="3.5555556416511536"></line><line stroke="black" x1="289.04425048828125" y1="476.14459228515625" x2="279.2665710449219" y2="454.1772766113281" fill="none" stroke-width="3.540903627872467"></line><line stroke="black" x1="302.0365295410156" y1="493.2898864746094" x2="289.04425048828125" y2="476.14459228515625" fill="none" stroke-width="3.531135618686676"></line><line stroke="black" x1="317.841552734375" y1="506.01495361328125" x2="302.0365295410156" y2="493.2898864746094" fill="none" stroke-width="3.5384616255760193"></line><line stroke="black" x1="335.1199645996094" y1="513.7837524414062" x2="317.841552734375" y2="506.01495361328125" fill="none" stroke-width="3.5457876324653625"></line><line stroke="black" x1="354.00555419921875" y1="516.4627075195312" x2="335.1199645996094" y2="513.7837524414062" fill="none" stroke-width="3.462759554386139"></line><line stroke="black" x1="373.5609436035156" y1="516.1947631835938" x2="354.00555419921875" y2="516.4627075195312" fill="none" stroke-width="3.3968254923820496"></line><line stroke="black" x1="393.38421630859375" y1="511.23876953125" x2="373.5609436035156" y2="516.1947631835938" fill="none" stroke-width="3.2991454005241394"></line> </svg>

ただし,Base64で変換して<img>要素の資源として埋め込んでいるので,「SVGの特性」みたいなもんはほぼ活かせない。

実践例↓


なお,この図は自動生成ではなく,手書きである。
非常に疲れた。SVG画像を直に書くのは人間業ではない。〝手書きの温かみ〟なるものも,百歩譲って列態画像ならありうれど,SVGにそんなもの生まれようもないし。

さっさと自動生成する論組を考えたいが,その前に↑こういう図を説明する平文書式を考えなくてはならない。
そして,私は新しい書式を生むのは可能な限り避けるべきだと信じているので,既存の書式を探している。
そもそも標準規格ってあるのか?