HowTo use custom SVG image shapes - Forum | JoomShaper
Solved General

HowTo use custom SVG image shapes

Asked by BOFHJunior 2 years ago Last activity 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="http://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="http://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

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
2 years ago · edited

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

Josef
1 year ago

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.

3 more replies

Oldest first Newest first Most helpful
Pavel
2 years ago · edited

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="http://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.

Paul Frankowski Senior Staff
2 years ago

Hi,

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

I will create a short video in next minutes.

Log in to reply.