search

newsdev / ai2html

A script for Adobe Illustrator that converts your Illustrator artwork into an html page.
http://ai2html.org
Other
898 stars 146 forks source link

Exporting text elements as part of an interactive <g> element #173

Open erinreiss opened 3 months ago

erinreiss commented 3 months ago

Dreaming of a way to use ai2html to create a group in my interactions:svg layer that includes a path, a line, and a snippet of text that will all be turned into a single element with a shared id. Currently, text elements within a svg:interactions layer group in illustrator are kicked out of the group, so they remain as text elements and do not share the id.

I know I can get around this by expanding appearance on all text so they are just paths. But that is a really tough workflow, especially if you want to go back and change text.

So! I am dreaming of a setting in ai2html that could:

  1. Allow the text elements in svg:interactions groups in illustrator to stay part of the element that exports
  2. Allow svg:interactions group to apply a class to their output (instead of an id) — so that even text that was kicked out of the would still bear the class from the illustrator group they started in, and could be targeted with js, along with the paths that ended up in the
  3. Or worst case, by auto-converting the text to paths and then exporting all text inside of interactions:svg as paths, allowing them to end up in their destined elements

Thank you for your amazing script!! I teach it in every class I run!

mbloch commented 3 months ago

Hi! Thanks for your feedback. Both option 1 or 2 sound feasible. One issue with option 1 is SVG text scaling. If text is rendered as SVG, depending on how the SVG is embedded in the graphic, the size of the text may scale if the graphic is displayed at a different size from the size of the original Illustrator artboard, when using the responsiveness: dynamic option. (Text scaling is generally something we don't want, in my experience).

erinreiss commented 3 months ago

Thank you so much! #2 would be a life saver and really make it easy to use ai2html as a way to set up an interactive visual that has different text/path-based annotations that can be turned on and off with JS :)

archietse commented 3 months ago

A proposed solution: Any text in a layer with the :svg suffix will be ignored in the html text processing and instead exported as part of the SVG. This will mean that that the SVG text will scale when the image/graphic scales, which would be unlike the text that goes thru the html text processing loop.

This seems like it would be intuitive — but it may throw some users who expect that all text be converted into html.

I would suggest that this should be the default behavior.