Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
erinreiss opened this issue Jul 1, 2024 · 3 comments
Open

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

erinreiss opened this issue Jul 1, 2024 · 3 comments

Comments

@erinreiss
Copy link

erinreiss commented Jul 1, 2024

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
Copy link
Contributor

mbloch commented Jul 1, 2024

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
Copy link
Author

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants