• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

SVG File publishes as image (text not selectable), and doesn't show in Design mode correctly

New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

HI,

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!

Views

1.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Guide , Feb 12, 2018 Feb 12, 2018

Place the following code in the head (in the page properties):

<style>

.container {

    width: 100%;

    height: 0;

    padding-top: 40%;

    position: relative;

}

svg {

    position: absolute;

    top: 0;

    left: 0;

}

</style>

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:

<div class="container">

   <!-- here goes your svg code -->

</div>

After these actions in the

...

Votes

Translate

Translate
LEGEND ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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?

Thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

SVG is not suitable for searching. You should just create HTML. Use the widget that Günter Heißenbüttel recommends, or this service HTML Table generator - TablesGenerator.com

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Pavel Homeriki​: Did you get the responsive feature of „TablesGenerator“ to work?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Yes, it works.

3e5ae6042f.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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".

d069aa3dc8.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Thank you, Pavel. Even the preview on the „tablesgenertor.com“ itself doesn’t work in Safari and Chrome at least.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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.

1cc7a969a4.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Hi Pavel,

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

Thank you,

Peter

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

I can not download from your links. Registration is required. Provide public links

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Place the following code in the head (in the page properties):

<style>

.container {

    width: 100%;

    height: 0;

    padding-top: 40%;

    position: relative;

}

svg {

    position: absolute;

    top: 0;

    left: 0;

}

</style>

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:

<div class="container">

   <!-- here goes your svg code -->

</div>

After these actions in the Muse will look like this

c3bb62a62d.png

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Pavel,

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

You are welcome

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

LATEST

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:

In head:

.container2 {

    width: 100%;

    height: 0;

    padding-top: 40%;

    position: relative;

}

And do not forget to change the value of padding-top. The formula by which it is calculated I wrote above.

In page:

<div class="container2">

   <!-- here goes your svg code -->

</div>

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.

svg {

    position: absolute;

    top: 0;

    left: 0;

}

--------------------------------------

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines