Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

icon svg/png file instead of using svg html

  • YC
    June 5, 2023 at 8:51 pm

    Hi there,

    I would like to use HEADLINE to add a social medial icon.
    However, I don’t find the specific one at ICON/ICON SVG HTML/General or Social.
    In this case, instead of using SVG HTML, could I uplaod a svg file?

    I only have .svg or .png for that icon.

    thanks

  • David
    June 6, 2023 at 4:03 am

    Hi there,

    in GenerateBlocks, yes you can add your own inline SVG.
    First open your SVG file in this site:

    https://jakearchibald.github.io/svgomg/

    Then copy the markup and paste it into the SVG HTML field of your Headline or Buttons block.

  • YC
    June 6, 2023 at 5:36 am

    Fantastic !! This program works great.

  • David
    June 6, 2023 at 6:00 am

    Glad to hear that!!

  • YC
    June 7, 2023 at 12:57 am

    I uploaded a svg file and copy, past into SVG HTML field.

    It looks good while editing it.
    However, if you look at it by viewing the page, it’s not right, the images were cut a little bilaterally.

    Any ideas?

  • David
    June 7, 2023 at 2:37 am

    this is what i see:

    https://app.screencast.com/7RmyHa47wgFa0

    Whats the issue ?

  • YC
    June 7, 2023 at 3:07 am

    It looks good on your side.
    I also try to view it with iPad, it looks ok.

    The problem happens while accessing the page on desktop and mobile phone.

    I upload the screen capture and attach the link as private info.

  • David
    June 7, 2023 at 3:11 am

    Which browser or device are you viewing it on that has the issue ?

  • YC
    June 7, 2023 at 3:33 am

    This happens on:
    Chrome& Microsoft edge on Windows 11, 1920×1080
    Chrome on android phone

    However,
    chrome or safari on iPad =>ok

  • David
    June 7, 2023 at 3:53 am

    Ah ok, its a problem with the SVG – it has a clipPath that Chromium doesn’t like
    I cleaned the SVG up.
    Try this:

    
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 150 150"><path d="M117.5 150h-85C14.553 150 0 135.453 0 117.5v-85C0 14.553 14.552 0 32.5 0h85C135.447 0 150 14.552 150 32.5v85c0 17.947-14.552 32.5-32.505 32.5" style="fill:#00b900;fill-rule:nonzero"/><path d="M129.369 68.4c0-24.436-24.5-44.316-54.613-44.316-30.116 0-54.611 19.88-54.611 44.317 0 21.911 19.427 40.255 45.672 43.724 1.776.386 4.199 1.178 4.814 2.698.546 1.38.36 3.541.172 4.937l-.776 4.677c-.24 1.38-1.1 5.4 4.728 2.943 5.828-2.459 31.453-18.52 42.912-31.708h-.006c7.918-8.677 11.708-17.489 11.708-27.271" style="fill:#fff;fill-rule:nonzero"/><path d="M63.661 56.6h-3.833c-.582.002-1.06.48-1.063 1.061v23.798c0 .588.48 1.057 1.063 1.057H63.668c.579 0 1.056-.477 1.056-1.056V57.659c0-.582-.478-1.06-1.06-1.06h-.003m26.37.005h-3.843c-.584 0-1.065.479-1.068 1.063v14.136L74.213 57.079c-.02-.038-.052-.074-.077-.11l-.089-.089-.063-.047c-.005-.01-.015-.016-.027-.021l-.05-.04a.184.184 0 0 0-.038-.017l-.052-.031-.036-.021-.062-.027-.031-.009a.235.235 0 0 0-.068-.022l-.037-.009-.056-.011c-.016-.005-.032-.005-.048-.005-.02-.005-.036-.005-.058-.011h-.052c-.014 0-.026-.005-.04-.005H69.5a1.07 1.07 0 0 0-1.063 1.063v23.797a1.06 1.06 0 0 0 1.063 1.057h3.828c.593 0 1.067-.469 1.067-1.057V67.328l10.917 14.751c.074.102.166.19.271.26l.01.01.068.036.032.022c.015.005.031.014.047.02l.052.026.031.011.073.02c.005 0 .011.005.016.005.09.024.183.035.276.032h3.836a1.06 1.06 0 0 0 1.055-1.053V57.652a1.07 1.07 0 0 0-1.063-1.063M54.427 76.557H44.016V57.653c0-.581-.478-1.06-1.06-1.06h-3.831c-.584 0-1.065.479-1.068 1.063v23.792c-.004.275.103.539.298.733l.014.016.016.016c.208.199.454.298.734.298h15.308c.589 0 1.062-.48 1.062-1.063v-3.84c0-.58-.477-1.057-1.057-1.057h-.005m56.756-14.004h.002c.582 0 1.06-.479 1.06-1.06V57.648c0-.582-.478-1.06-1.06-1.06H95.876a.999.999 0 0 0-.736.303c-.004.005-.009.005-.015.01 0 .006-.01.011-.016.02a1.1 1.1 0 0 0-.292.73v23.797c0 .287.115.547.298.733l.01.016.015.016c.193.183.453.298.735.298H111.185c.582 0 1.06-.479 1.06-1.06v-3.84c0-.582-.478-1.06-1.06-1.06h-10.404v-4.022h10.407c.284.005.557-.108.755-.312.201-.196.312-.468.306-.749v-3.839c0-.58-.477-1.057-1.057-1.057h-10.411v-4.021h10.412l-.01-.004Z" style="fill:#00b900;fill-rule:nonzero"/></svg>
  • YC
    June 7, 2023 at 4:39 am

    SUPER!! It works well now.

  • David
    June 7, 2023 at 4:44 am

    Glad to hear that!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.