When an SVG is placed into Muse, the published version will not have selectable (or searchable) text. My SVG is created in Illustrator.
My current workaround is to take the svg code and put it into a HTML object. This works, but Muse does not display it or re-size it properly in Design mode, which is very frustrating. The code in the HTML object needs to be increased in size by bout 150% to be 'right sized', which is fine, but the thumbnail in Design Mode does not expand with the box, making actual design very difficult.
Here is how it looks 'resized' in design mode - the light boxp showing it's size goes away when you click away from it, so there's not really a way to tell how big it is while designing the rest of the page.:
Here is how the above previews and publishes:
We need the text to be selectable and searchable for site search mainly, but also for our customers. These are tables, drawings, etc., so it's functional.
is there any better workaround, or fix for the display issue in design mode, or better yet, can i get text to be selectable when placing?
Thanks in advance!
This is the way, it works: SVG is an „encapsulated“ graphic format, which can’t be accessed on your site.
The content of an HTML object normally isn’t displayed within Muse. You have to live with a placeholder. If the content is responsive or not, is depending on the code of the HTML element. This is better answered by Pavel Homeriki.
By the way: A very versatile and fine working table widget is this one: https://www.muse-themes.com/products/table-connect
As you can see in the live preview, the table content is selectable.
There are two issues.
1. Code for svg can be output and displayed with the text selectable out of Adobe Illustrator. Why would that output show differently when placed as svg VS. Running the code directly in an html object in Muse? That doesn't make sense.
2. The display issue In design mode. Same story. Placed svg operates differently than the code in html object.
These are really consistentency issues with the program. I'm asking if these are known bugs and if there's a better workaround?
Yes, Pavel, I know this, but if I place a "responsive-enabled" table into Muse (HTML object) it doesn’t react responsive.
(… but I don’t want to hijack this thread)
I now checked. You're right... But it used to work in Muse and now it works on other platforms, but not in Muse ... Sadness.
If you make a small fix in the code, it works. Without adding the function "make the table responsive".
Thank you, Pavel. Even the preview on the „tablesgenertor.com“ itself doesn’t work in Safari and Chrome at least.
The code allows you to make any edits so that it works. Here are even simpler corrections. Add "make the table responsive" and...
1) The initial width of the table. Can be replaced by 100%.
2) The width of the table if the screen is less than the breakpoint (3) - must be replaced by 100%
3) Breakpoint, after which the table becomes responsive - you can configure as you need.
With knowledge of css everything can be customized even more thinly. You can add multiple breakpoints and so on.
Thanks for the option in the link you provided, but it is not sufficient for what we need. We have hundreds of highly formatted tables that we need to maintain, plus we want the text in our drawings to be searchable on the page also (think <ctrl> F even).
All Muse needs to do is treat the code for SVG like other programs do, AND like Muse itself does when the SAME CODE is placed into a HTML object in Muse.
Try taking the code from your SVG that has the responsive text and placing it in an HTML object in Muse. When you preview/publish it, it works great. When you resize it in Muse, it looks weird and wrong, but is publishes perfectly.
When you place a SVG into muse, all you get is the image though.
See what I mean?
Provide some sort of original table that we could conduct an experiment. I have an idea and I could check it out. But I do not want to make a table in the illustrator
Here is an example of SVG output from Illustrator that functions like I explained.
You can just open it in any browser and confirm that the text is selectable, and then see how it operates in Muse in the ways I explained above.
I am also attaching the Illustrator file for your reference and use:
SVG output from Illustrator 57.svg - Box
Illustrator file: Test SVG Illustrator File.ai - Box
Also please keep in mind SVG is used for our technical drawings and other things where it would be greatly more efficient to output from our other graphics programs with text enabled, sync the fonts with typekit, and publish the webpage.
Other methods require us to re-create and then maintain versions which is terribly inefficient and well, boring.
I can not download from your links. Registration is required. Provide public links
Place the following code in the head (in the page properties):
Where padding-top = (real height of svg / real width of svg)*100(container width)
In the SVG code, the width and height should be removed if they are there.
Paste the following code into the page:
<!-- here goes your svg code -->
After these actions in the Muse will look like this
Also, in the SVG code, you can add breakpoints.
But all this is of purely academic interest.
My advice to you is - use a simple html table. This is much more convenient and works better than svg tables. Svg tables - it's an attempt to invent a square wheel
Thank you SO MUCH for this help. It gets me where I need to go, and I appreciate it greatly!
I agree that a simple table would me better technically as far as the code goes, but the highly designed nature of what is required here, plus the requirement with the text+drawings, etc. makes this my best bet.
Again, thank you so much. Have a great day!
It seems this will only work for a single table/svg drawing per page. Adding a different second item on the same page breaks this solution.
If you want several tables on a page, then you must modify the code part for each individual table.
For example, for the second table, use this code:
And do not forget to change the value of padding-top. The formula by which it is calculated I wrote above.
<!-- here goes your svg code -->
For the third table .container3, for the fourth table .container4 and so on...
You do not need to re-insert the next part of the code for other tables. It is the same for all tables.