nishio who knows what they want to do (design skills are not up to par).
nishio
nishio Youāll notice discrepancies in details when you make them and then put them side by sideā¦ nishio I guess this is how it goes.
nishio Well, Iāll eventually make a Canvas implementation, so thatās about it for nowā¦
nishio āI need to generate an OGP image?ā I asked him and he answered āWell, make a sample of step 1ā and I got the sample code and ran it and it worked fine.
nishio something like this?
nishio Iāve made it this far.
nishio I took my wifeās information design consulting
nishio I see.
nishio Iāll compare it to my own design, I knew it was better now.
nishio I was able to get the text poured in.
nishio SVG to PNG is done, but text laid out with foreignObject is not displayed?
nishio difficult, more to come.
nishio Iām in trouble, I exported SVG from Adobe XD and pasted it into React as JSX I pasted the SVG exported from Adobe XD as JSX to React so that data can be poured in, but word wrap is not done automatically, so I used divs with foreignObjects. But when I render it with Sharp on the server side, the text is not displayed. to be continued nishio So I asked GPT4 if there is any good library to dump foreignObject and carve it into tspan, and they said āno, use this functionā or something like that. I tried to use it anyway, but document.createElement doesnāt work on the server side. The solution is jsdom. seriously? Are you sure youāre not running in the wrong direction? nishio Iāve been going along without worrying because AI is accelerating so fast, but isnāt this the path humans should be on? Are you sure about that? I think there was a fork in the road between SVG and Canvas, and a fork between Sharp and Pupettier, but Iāve been trusting them to come up with a solution with full confidence, so Iāve been going forward, but is this really the path to take? nishio
nishio No! Thatās a trap, isnāt it?
nishio Wait, in the first place, in this view, I think the appearance of the text in a monospace font and line breaks without considering word breaks or hyphenation is sufficient. I guessā¦ then there is no need to get the width. In the end, which technology choice is better depends on the unspoken requirement specification of āhow you expect it to look like. nishio Until 5 minutes ago, I was thinking āI canāt get the width, so itās impossible to make my own line breaks, Sharp was the wrong choice and Iāll choose Puppeteerā
- Maybe the AI assistants are misleading you in a big way.
- Rendering SVG on the server side is a thorny issue.
- I canāt copy and paste if itās made into an image.
- Since the image seems to be a fixed size, I would put a div with position:absolute or something to overlay the image.
- No, what Iām making now is an OGP Image for SNS, so itās a prerequisite to make it an image.
- I can embed a div in the SVG itself with a foreignObject, but when I try to render it on the server side, it doesnāt show up, and Iām wondering if thatās not good enough.
- Ah, OGP.
- I made my own tool to insert text into images for OGP generationā¦
- I wonder what everyone else is doing.
- Simple things can be done with ImageMagick, but if you start thinking about folding Japanese characters, you will have to make your own.
- It would be nice to be able to generate PNGs or something from SVG without having to think about it.
- I believed the AI when it said it could do that, and I was hooked.
- ricapitolarećÆsvgēęć®ćæ
wrote code to convert svg to png in rust.
- Itās interesting that talking to GPT4 clarifies a wide variety of misconceptions on this subject.
- Iād like to sort this out after a break as an interesting story of human cognition.
This page is auto-translated from /nishio/pMAGI-2024-02-06 using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. Iām very happy to spread my thought to non-Japanese readers.