Custom shape divider

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
Terry.Latey
 
 
Posts: 25
Joined: Sat Sep 05, 2020 7:46 pm

Custom shape divider

Post by Terry.Latey »

I would like to create a custom shape divider. I have a screen shot of the graphic draft of the design at https://drive.google.com/file/d/1RLflVc ... share_link.
Is there someone who could help me with the project?
Terry
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Custom shape divider

Post by crispy68 »

Hi Terry,

Got your email and emailed you back. Your link asks for me to request the docs. I have done so.
Terry.Latey
 
 
Posts: 25
Joined: Sat Sep 05, 2020 7:46 pm

Re: Custom shape divider

Post by Terry.Latey »

Thank you I did receive your email, thank you for your help. I have found I can create a svg in CorelDraw. But I need to go back and read more of the explanation of how to use the file.
Thank you again,
Terry
Terry.Latey
 
 
Posts: 25
Joined: Sat Sep 05, 2020 7:46 pm

Re: Custom shape divider

Post by Terry.Latey »

Hi Again,
I am back with the same concerns. I have created another shape within CorelDraw and saved it as a SVG. I must not be saving it with the proper settings because it just sits at the bottom of the flex container, small and black. When saving a SVG are there specific settings for the web?
Terry
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Custom shape divider

Post by crispy68 »

I wouldn't say there are specific settings for an SVG but there some things it does need to have (ex: viewBox). Without actually seeing your SVG, it's hard to say what your issue is. To use it in WB via the divider tab, there is some code that needs added to work. Maybe this will help: https://www.wysiwygwebbuilder.com/shape_dividers.html
User avatar
BaconFries
 
 
Posts: 5324
Joined: Thu Aug 16, 2007 7:32 pm

Re: Custom shape divider

Post by BaconFries »

When saving a SVG are there specific settings for the web?
Unfortunately we cannot assist with how to use Coreldraw and what settings you should use to save as a svg. I would suggest you contact the following https://community.coreldraw.com/talk/ where help will be given.
Terry.Latey
 
 
Posts: 25
Joined: Sat Sep 05, 2020 7:46 pm

Re: Custom shape divider

Post by Terry.Latey »

Thank you for the advice to visit the CorelDraw forum. They don't seem to have an answer thus far. I have copied the code of my SVG. It is below, is this helpful to determine the problems I am having?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010 ... /svg10.dtd">
<!-- Creator: CorelDRAW 2021 (64-Bit Not for commercial use) -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="8.53233in" height="4.37636in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 8502.65 4361.14"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:black;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="divider-fill" d="M8500.86 2883.32c0.45,-84.26 1.79,-233.54 1.79,-233.54 -129.39,1.65 -408.58,-2.64 -887.5,-1.48 -398.71,0.97 -765.9,-0.45 -797.41,-1.18 -230.63,-5.37 -415.11,14.31 -679.34,-73.73 -131.16,-43.7 -253.87,-253.12 -303.86,-327.9 -190.36,-284.74 -362.55,-371.09 -575.24,-345.18 -146.14,17.8 -280.27,151.66 -407.05,177.82 -187.84,38.76 -341.89,15.42 -444.94,-91.37 -156.49,-162.19 -144.72,-160.71 -268.63,-299.63 -49.98,-56.04 -209.85,-239.59 -250.01,-286.95 -189.14,-223.06 -458.36,-467.55 -752.02,-437.02 -17.27,1.07 -34.41,3.77 -51.32,8.09l-0.42 0.09 -0.01 -0c-73.69,14.07 -208.22,45.44 -322.11,95.53 -194.17,85.41 -380.36,204.51 -479.46,234.71 -66.2,20.17 -295.45,9.32 -365.74,-57.06 -29.57,-27.92 -203.78,-182.3 -273.7,-272.18 -89.19,-114.66 -194.17,-315.12 -321.02,-500.3 -50,-72.99 -96.53,-127.11 -160.75,-183.72l-133.79 -117.84 -123.66 -77.92 -110.38 -50.43 -34.62 -13.77c-57.3,-25.99 -125.6,-27.95 -190.03,-27.87 -335.26,-17.53 -569.65,444.91 -569.65,444.91l0 2235.53 0 241.68 0 750.08 0 688.45 8500.86 0 0 -1477.81z"/>
</g>
</svg>
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Custom shape divider

Post by crispy68 »

@Terry,

I use inskape and they have an option when you save it to save it as a stripped down/optimized .svg. This removes a lot of the junk that gets added like I see in yours. Maybe CorelDraw has a similar option?

I removed all the clutter and came up with this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 8502.65 4361.14" preserveAspectRatio="none">
<g><path class="divider-fill" d="M8500.86 2883.32c0.45,-84.26 1.79,-233.54 1.79,-233.54 -129.39,1.65 -408.58,-2.64 -887.5,-1.48 -398.71,0.97 -765.9,-0.45 -797.41,-1.18 -230.63,-5.37 -415.11,14.31 -679.34,-73.73 -131.16,-43.7 -253.87,-253.12 -303.86,-327.9 -190.36,-284.74 -362.55,-371.09 -575.24,-345.18 -146.14,17.8 -280.27,151.66 -407.05,177.82 -187.84,38.76 -341.89,15.42 -444.94,-91.37 -156.49,-162.19 -144.72,-160.71 -268.63,-299.63 -49.98,-56.04 -209.85,-239.59 -250.01,-286.95 -189.14,-223.06 -458.36,-467.55 -752.02,-437.02 -17.27,1.07 -34.41,3.77 -51.32,8.09l-0.42 0.09 -0.01 -0c-73.69,14.07 -208.22,45.44 -322.11,95.53 -194.17,85.41 -380.36,204.51 -479.46,234.71 -66.2,20.17 -295.45,9.32 -365.74,-57.06 -29.57,-27.92 -203.78,-182.3 -273.7,-272.18 -89.19,-114.66 -194.17,-315.12 -321.02,-500.3 -50,-72.99 -96.53,-127.11 -160.75,-183.72l-133.79 -117.84 -123.66 -77.92 -110.38 -50.43 -34.62 -13.77c-57.3,-25.99 -125.6,-27.95 -190.03,-27.87 -335.26,-17.53 -569.65,444.91 -569.65,444.91l0 2235.53 0 241.68 0 750.08 0 688.45 8500.86 0 0 -1477.81z"/></g>
</svg>
Post Reply