HowTo Use Custom SVG Image Shapes - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →
Back to the questions

HowTo Use Custom SVG Image Shapes

BOFHJunior

BOFHJunior

General 1 year ago

Hello Paul, i think you don't have Eid ul Adha 2024 vacation. ;-)

So maybe you can write a more detailed HowTo on using custom SVG image shapes than what is written in the SPPB documentation.

I tried

<!DOCTYPE html>
<html>
<body>

<h2>SVG polygon Element</h2>

<svg height="220" width="500" xmlns="www.w3.org/2000/svg">
  <polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

and i tried

<svg width="300" height="130" xmlns="www.w3.org/2000/svg">
  <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
  Sorry, your browser does not support inline SVG.  
</svg>

Both resulted in an Error.

https://i.imgur.com/X2edtos.png

0
5 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #160020

VIDEO GUIDE: https://youtu.be/KkAtbwSpgLo

I used online generator for new shapes. We assume that most webmasters will use that same method that it fast & trusted.

Thanks @Pavel

0
J
Josef
Accepted Answer
1 week ago #205551

Hello Paul, I have now also tried a few things with the SVG shapes. My problem is that the size and spacing are not right. The images are displayed much too small, even when enlarged eight times.

Is the video ready yet? The Softr tool is unusable because we have very specific ideas about the shape of the shapes.

I am using the latest versions of both Joomla and SPPB.

0
Pavel
Pavel
Accepted Answer
1 year ago #159752

Hi.

SVG should contain only one path tag (not rect,poligon, circle tags, multi path tags and ect)

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="www.w3.org/2000/svg" viewBox="0 0 154.12 101.31">
    <path d="M2.21,1.89c47.91-4.8,93.25-.84,134.68,16.5,15.57,23.04,19.4,46.95,16.16,71.38-47.45,14.59-97.1,14.81-148.48,3.7C-.82,64.32-1.22,33.68,2.21,1.89Z"/>
</svg>

In general, I find this option very raw and useless, since there are practically no control options for custom figures. Scale Shape - It is not clear how it works for custom figures.

I think the Joomshaper team can try the above example to explain how it works and what parameters should SVG have to be universally and use a different scale.

Now, I believe, you need to draw Shape with just the size as in the final form. Scale Shape option is useless in this case. It breaks everything.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 year ago #160012

Hello BOFHJunior

I have used Raw HTML addon and your SVG works fine. How are you using the SVG?

https://prnt.sc/6rdgaXGcksQL

https://prnt.sc/Mm2aA0zmt4SQ

Best regards

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #160019

Hi,

Yes, shapes works. But SVG code must be correct and clean, without HTML around.

I will create a short video in next minutes.

0