Custom SVG divider

there are some usefull filters in the coresponding php file: class-svg-shapes.php
for the most of my installations – i do not use the month and year based media setting. All Images i upload goes to the uploads folder. So i set for those custom svg the path by:
to child-theme functions.php

function my_svg_path(){
  $path = get_site_url().'/wp-content/uploads';
      return $path;
}
add_filter( 'avf_custom_svg_shapes_files_directory', 'my_svg_path', 10, 1 );

so i can upload those custom-svgs via media library – that is nice to have – even to see how they look like.

if you prefer a folder in your child-themes folder ( like shortcodes folder for custom alb elements )
you can set it up by ( name the folder as you like f.e.: custom-svg ):
to child-theme functions.php

function my_svg_path(){
  $path = get_stylesheet_directory().'/custom-svg/';
      return $path;
}
add_filter( 'avf_custom_svg_shapes_files_directory', 'my_svg_path', 10, 1 );

all your custom svgs come to that folder ( enfold-child/custom-svg/ )

to get new svg in that dropdown list you can do that to child-theme functions.php
( set to false if you do not want to have the given options )

function custom_avf_custom_svg_shapes( array $custom_shapes ) {
// example for uploading a svg file:  your_file.svg 
$custom_shapes = array (
	'your_file'	=> array(
		'title'			=> __('YOUR FILE NAME', 'avia_framework' ), // Name displayed in select box - whatever you like 
		'has_negative'	=> true,				// uploaded file had to be named: your_file-negative.svg
		'has_flip'		=> true,
		'has_width'		=> true,
		'path'			=> string,				// if you like to determine a different path (absolute)
		'filename'		=> 'your_file',			// .svg will be added if missing
		'attachment'			=> integer,				// attachment id of uploaded media ( if you like to determine )
		'attachment_negative'	=> integer 				// attachment id of negative uploaded media ( if you like to determine )
	),
);
return $custom_shapes;
}
add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

_______________________
info
the default enfold svg is a top positioned one so it has its 100% fill color on top (except the negative svgs):

the bottom svg dividers are transformed by 180deg rotation – they do not need an extra file.

now you had to decide what behavior your divider has to have. Should it be responsive or you like to use it as pattern etc.
most of the enfold default svgs do have inline : preserveAspectRatio=”none”
with the given options

• to set it to a fixed height – the svg will keep the set height and is squashed in its width.
• if you set it to : “auto, defined by svg viewport” and set the max-height to none – it will react “responsive”.
• if you set it to : “auto, defined by svg viewport” and a fixed max-height – it will be squashed in width for larger screens – and reacts responsive on smaller screens

.

____________________
If you like to preserve allways responsiveness – you had to set inside your svg : preserveAspectRatio=”xMidYMin meet” xml:space=”preserve”
then the limitation by max-height will end up a divider that has on big screenwidth a given dimension – on smaller screens when the width fits the screen width it will shrink with the aspect ratio.
____________________
Patterns tend to have inside the svg : preserveAspectRatio=”xMidYMin slice” ( see enfold wave-pattern)
( the Y-Value had to be on min ( fill-color is on top – see above) )
the x-Value depends on you.

I don´t know if we need this dividers :( there re so much more important work to do for enfold.

An unsattisfied longterm user (Over 30 Enfold projects for over 30 clients )