Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    [solved] SVG Transparency Issue

    General Discussion
    2
    9
    185
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      robochicken last edited by robochicken

      Hi everybody.

      I cant seem to figure this out on my own. Been browsing the web for quite a while now and unfortunatly i am not a trained webcoder.

      So I like using SVGs to have crispy graphics at any solution, and also because I like the cutout effect. And its been working fine for thumbnails, titles etc.

      Now the really weird part: I have this page here, where i added the svg once as a background image. As you can see its cutout just fine. Than i selected the exact same file and put it in as a "regular" image in the gridder. And it displays with a white background!

      http://richardlennox.de/philosophy

      Gridder Screenshot:
      0_1570916715268_Anmerkung 2019-10-12 234443.png

      And the weirdest thing is... it looks like i would want it in the gridder preview.

      PS: I used SVG Support Plugin and Now "Safe SVG", no difference

      Could anybody please help me with this or redirect me to a solution?

      1 Reply Last reply Reply Quote 0
      • edgrbnz
        edgrbnz last edited by edgrbnz

        Hmm… 🤔
        There’s probably something wrong with the SVG.

        There is a lot going on in terms of color and shapes. Best is to reduce the shapes everything as much as possible before exporting.
        Nonetheless there still could be shapes or background areas that are in there that get interpreted wrong by your browser. (btw. which one are you using?)

        If you open the SVG in sublime text or a similar code editor you can check how many paths and elements are in there. And also erase unnecessary lines of code.
        I downloaded and opened it in illustrator, after opening there’s an error regarding appearance. And inside Illustrator it looks like this:

        0_1570954750780_44a9e27a-9510-46bc-a2e0-3d611ac1294d-image.png

        So there’s definitely something wrong with your SVG.

        For complex images like these I’d just recomment to go for a png in decent resolution. that always works and also is able to do transparency.

        Cheers!

        ✦ ✦ ✦

        1 Reply Last reply Reply Quote 0
        • R
          robochicken last edited by robochicken

          hi there,

          thanks for the reply.

          i see what you are saying there, but i doubt thats the reason tbh.

          i ve put in another graphic, which could hardly be too complex and i have exactly the same issue.

          http://richardlennox.de/philosophy/

          also... why does it work fine as a background image? thats the thing that make the least sense to me.

          1 Reply Last reply Reply Quote 0
          • edgrbnz
            edgrbnz last edited by edgrbnz

            I don’t know…

            Every SVG (even animated ones) I’m using in any (lay-based) website are working just fine.
            I wouldn’t recommend using SVGs for big colorful graphics in general . They’re ok for icons, simple logos or simple illustrations. If there are too many paths inside a SVG even desktop software like Sketch is generating a lot of load for the computer to render these.

            Your new SVG-graphic isn’t optimised either:
            There are a lot of groups in groups in groups and empty layers. Since SVGs are essentially code you are adding to your website there can be a lot of weird things happening.
            So first thing would be to get your vector files as clean and lean as possible an then export for screens via Illustrator and try again.

            Or try replacing the images / background image with PNGs and see if the error persists.
            (you can use transparent PNGs in fairly high resolutions when optimising them with imageAlpha or similar. So there would be no real perceivable difference between a SVG and a high-res PNG.)


            That’s the code of your rainbowAK:
            (as you can see in the right section that document is miles long and it’s nothing more than an image (jpeg;base64) with trimmarks inside a SVG – so basically it already is a very complicated PNG)
            0_1570963189427_3b017727-2543-449f-95ff-ffd6ec19190c-image.png

            That’s the code of your last SVG bocal__thumbnail:
            0_1570961718288_9bd843a8-41e8-47b2-95a5-53761ab933e0-image.png

            That’s a fairly complex (but optimised) logo I’m using on one of my sites:
            (no strokes, as less shapes as possible to render the image)
            0_1570961931897_540c2a1a-7e92-463d-81be-fd46f0c03ae1-image.png

            ✦ ✦ ✦

            1 Reply Last reply Reply Quote 0
            • R
              robochicken last edited by

              This post is deleted!
              1 Reply Last reply Reply Quote 0
              • R
                robochicken last edited by

                This post is deleted!
                1 Reply Last reply Reply Quote 0
                • R
                  robochicken last edited by

                  ok so i found out that the color is related to the "lazy load placeholder" color i can select in the layoptions.

                  the issues also persists with png

                  http://richardlennox.de/philosophy

                  however, it just keeps the color and appearently never finishes loading.

                  is this a proper bug or what is happening?

                  1 Reply Last reply Reply Quote 0
                  • R
                    robochicken last edited by

                    so i cleared the lazy image placeholder color and voilá: issue solved.

                    so it wasnt an issue with the SVG really but some weird behaviour with the lazy load.

                    1 Reply Last reply Reply Quote 0
                    • edgrbnz
                      edgrbnz last edited by edgrbnz

                      Cool!

                      Well yes that’s a thing. Since the pictures are transaprent the color is always there. That’s not a bug really. I had the same issue a while back.

                      Glad it works now!

                      ✦ ✦ ✦

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post
                      Post a link to where the problem is
                      I don't answer or check forum DMs, please just post on the forum.
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                      Before you post:

                      Use the Search Feature. Maybe there is already a solution to your issue.

                      1. Update Lay Theme and all Lay Theme Addons
                      2. Disable all Plugins
                      3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                      4. Now see if your problem solved itself
                      5. Go here, see if your problem is listed here:
                      Troubleshooting

                      When you post:
                      1. Post a link to where the problem is
                      2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                      Thanks!

                      Online Users

                      Q
                      T

                      Recent Topics

                      • A

                        With the updates my site has become very slow sloooooow

                      • A

                        thanks for the update ...

                      • A

                        Disable Rightclick and context menu for copyright reasons

                      • A

                        back to home from any project should not go back to top at home

                      laytheme.com