Display issue with 2 svg files on the same page

  • Resolved pierremaitre

    (@pierremaitre)


    4 years, 10 months ago

    Hey there,

    I have set 2 svg images on that page. The first one displays over 992px page width and the second one under 992px.

    Here is the css I use to display:

    @media only screen and (max-width: 992px) {
  .svg-over-992 {
    display: none;
  }
}
@media only screen and (min-width: 993px) {
  .svg-under-992 {
     
    display: none;
  }
}

    The images display correctly if there is only one on the page, but the images and the colors get messed up when the 2 images are set.

    Thanks in advance for your help.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi @pierremaitre,

    It looks like you might need to outline all text and expand all elements in your SVG before upload. I’ve seen SVGs play up like that when things haven’t been outlined and expanded.

    Let me know how you go.

    Thread Starter pierremaitre

    (@pierremaitre)

    Hi @benbodhi,

    Thanks for your reply. I outlined all texts and expanded all elements in both images, but it doesn’t change anything, the images still look ugly.

    Any other idea?

    • This reply was modified 4 years, 10 months ago by pierremaitre.
    Plugin Author Benbodhi

    (@benbodhi)

    Of course,
    Open them in your editor like illustrator, select all text elements (or just everything) and go to Type > Outline Text. Then select everything, all layers and go to Object > Expand.
    Then save as SVG again.

    That should do the trick.

    Thread Starter pierremaitre

    (@pierremaitre)

    Thank you very much @benbodhi,

    It worked, but it is really sensitive stuff. Sometimes the colors were messed up, sometimes some of the text did not appear. I had to play with the save options in Illustrator to make it fully work.
    Here is a screenshot of the options that worked for me, in case someone would have a similar issue.

    Plugin Author Benbodhi

    (@benbodhi)

    My pleasure!

    Yeah, I see that pretty often, complex SVG files that haven’t been outlined seem to always play up.

    Glad you got there. Thanks for sharing your settings.

    Please consider leaving a review.

    • This reply was modified 4 years, 10 months ago by Jan Dembowski. Reason: Removed ?filter=5 from review link
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @benbodhi Don’t put ?filter=5 in your review links, it hides the non-5 star reviews from the person who uses that link and that’s not being completely honest. That’s not necessary as the stars default to 5 for all new reviews. The reviewer would manually need to change it to something other than 5 if they wanted to.

    I’ve removed that part and now they’ll see the actual reviews and not just the 5 star ones.

    Plugin Author Benbodhi

    (@benbodhi)

    @jdembowski
    Thank you for pointing that out! I’ll make sure to paste the link you provided in the future ??

    I learnt that from WooCommerce FYI, so I just assumed it was to default the 5 star, not filter the rest out. I totally get it now though. Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Display issue with 2 svg files on the same page’ is closed to new replies.