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

Requirements for custom shapes?

  • Cheezballz
    February 27, 2026 at 6:18 am

    I’m trying to create custom shapes to use with the Shapes block. I use Affinity Designer, create a shape, export it as SVG, and pull it into https://jakearchibald.github.io/svgomg/ to clean it up. But my shapes either don’t ‘exist’ (they’re blank when imported, and nothing appears when using them in a shape block) or they are black rectangle that’s the right size but isn’t the actual shape.

    What are the limitations and are there settings I should be aware of when exporting? Should the SVGs be a specific color? (I’m using black, will now try white)

  • George
    February 27, 2026 at 7:03 am

    Hi there,

    There are a few key requirements for custom shapes:

    The SVG markup needs to be minimal — ideally just a <svg> wrapper with <path> element(s) inside. Complex SVG elements like <rect>, <circle>, <use>, gradients, filters, etc. can get stripped by the built-in sanitization.

    Make sure your SVG includes preserveAspectRatio="none" on the <svg> element — this is what allows the shape to stretch and adapt to the container dimensions. Also ensure you have a viewBox defined. The built-in shapes use a viewBox width of 1200 with varying heights depending on the shape design.

    Here’s what a clean custom shape looks like:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 360" preserveAspectRatio="none"><path d="M1200 360H0V0l1200 348z"></path></svg>

    For the issues you’re seeing:

    • Blank/invisible shapes — most likely caused by fill="none" in the exported SVG. If Affinity is exporting a stroke-only shape, the path exists but has no visible fill. Either remove the fill="none" attribute (the default fill is black, which GB will then override with its Color setting), or convert strokes to filled paths before exporting.
    • Black rectangle — this usually means the path data doesn’t match the viewBox, or complex elements were stripped during sanitization, leaving just the bounding area. Check the SVG in a text editor after SVGOMG to confirm the path d data looks correct.

    In Affinity Designer, make sure you flatten/expand your shapes to outlines and convert any strokes to fills before exporting. In SVGOMG, enable “Prefer viewBox to width/height” and verify that preserveAspectRatio="none" wasn’t stripped — you may need to add it back manually.

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