Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. [solved] SVG Transparency Issue

[solved] SVG Transparency Issue

Scheduled Pinned Locked Moved General Discussion
9 Posts 2 Posters 820 Views
  • 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 Offline
    R Offline
    robochicken
    wrote on last edited by robochicken
    #1

    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
    0
    • edgrbnzE Offline
      edgrbnzE Offline
      edgrbnz
      wrote on last edited by edgrbnz
      #2

      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
      0
      • R Offline
        R Offline
        robochicken
        wrote on last edited by robochicken
        #3

        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
        0
        • edgrbnzE Offline
          edgrbnzE Offline
          edgrbnz
          wrote on last edited by edgrbnz
          #4

          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
          0
          • R Offline
            R Offline
            robochicken
            wrote on last edited by
            #5
            This post is deleted!
            1 Reply Last reply
            0
            • R Offline
              R Offline
              robochicken
              wrote on last edited by
              #6
              This post is deleted!
              1 Reply Last reply
              0
              • R Offline
                R Offline
                robochicken
                wrote on last edited by
                #7

                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
                0
                • R Offline
                  R Offline
                  robochicken
                  wrote on last edited by
                  #8

                  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
                  0
                  • edgrbnzE Offline
                    edgrbnzE Offline
                    edgrbnz
                    wrote on last edited by edgrbnz
                    #9

                    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
                    0
                    Reply
                    • Reply as topic
                    Log in to reply
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes


                    I also code custom websites or custom Lay features.
                    💿 Email me here: 💿
                    info@laytheme.com

                    Before you post:
                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                    2. Update Lay Theme and all Lay Theme Addons
                    3. Disable all Plugins
                    4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                    This often solves issues you might run into

                    When you post:
                    1. Post a link to where the problem is
                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                    Online Users
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                    laytheme.com
                    • Login

                    • Don't have an account? Register

                    • Login or register to search.
                    • First post
                      Last post
                    0
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Search