Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 13, 2022 at 3:42 pm #1348254
    Jonas
    Guest

    Hey there,

    im trying to add a custom SVG seperator for my website but it does not work.

    what i did:

    1. i created a new directory in the upload folder called “avia_customs_shapes”
    2. i uploaded my .SVG file via FTP in there
    3. i wrote this script in my custom Php:

    * @param array $custom_shapes
    * @return array
    */
    function custom_avf_custom_svg_shapes( array $custom_shapes )
    {
    $custom_shapes = array(

    ‘Header-negativ’ => array(
    ‘key’ => ‘Header-negativ’,
    ‘title’ => __( ‘My Own Header’, ‘avia_framework’ ),
    // ‘has_flip’ => true,
    ‘has_width’ => true,
    ‘filename’ => ‘Header-negativ’
    )
    );

    return $custom_shapes;
    }

    add_filter( ‘avf_custom_svg_shapes’, ‘custom_avf_custom_svg_shapes’, 10, 1 );

    —-

    i get this Error Message wich i attached in private area.

    Is there any fix for this? i cant see my mistake there

    thanks for your help! :)

    best regards
    Jonas

    April 15, 2022 at 3:28 am #1348469
    Ismael

    Hey Jonas,

    Thank you for the inquiry.

    Did you place the svg file in the avia_custom_shapes within the wp-content > uploads folder? You should also check the name of the svg file and make sure that it corresponds to the specified value in the svg array.

    Try to replace the code in the functions.php file with this one.

    add_filter('avf_custom_svg_shapes', function($shapes) {
	$shapes = array(
		'header-negative'	=> array(
			'key'			=> 'header-negative',
			'title'			=> __( 'Header Negative', 'avia_framework' ),
			'has_width'		=> true,
			'filename' => 'header-negative'
		)
	);
	return $shapes;
}, 10, 1);

    In the avia_custom_shapes folder, make sure that the name of the svg file is header-negative.

    Best regards,
    Ismael

    April 22, 2022 at 5:35 pm #1349169
    Jonas
    Guest

    Hi Ismael,

    thanks for your help. I just had a small typo wich made it not work.

    But i found something really really strange:

    I live in germany thats why i really need to look in GDPR compatibility.
    After adding my custom SVG separator, my websites starts loading fonts from google.
    Im not using any of those two fonds on my website, wich are getting loaded.
    I also block all Google Fonts in my enfold settings but those fonts still gets downloaded from google so it seems for me like a bug.

    ill attach a link to my website in the private area. You can inspect that fonts get loaded from google with the developer console.
    I looked in the sourcecode and found this two places:

    <div id='footer-full' aria-label='footer-full' class='avia-section av-l1xnfpzo-03183143801b293c5bec81f38ce5fd17 main_color avia-section-no-padding avia-no-border-styling  avia-builder-el-1  el_after_av_hr  el_before_av_section  footer-full footer-full av-small-hide av-mini-hide avia-bg-style-scroll av-minimum-height av-minimum-height-25  container_wrap fullsize'   data-av_minimum_height_pc='25'><div class='avia-divider-svg avia-divider-svg-Footer-negative_2 avia-divider-svg-top avia-svg-original'><?xml version="1.0" encoding="utf-8"?>
<svg id="master-artboard" viewBox="0 0 1383.18017578125 82.54431915283203" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 0 0 1400 980;" width="1383.18017578125px" height="82.54431915283203px"><rect id="ee-background" x="0" y="0" width="1383.18017578125" height="82.54431915283203" style="fill: white; fill-opacity: 0; pointer-events: none;"/><defs><style id="ee-google-fonts">@import url(https://fonts.googleapis.com/css?family=Anton:400|Roboto+Slab:100,300,400,700);</style><path id="text-path-0" d="M 778.8464965820312 213.4612274169922 A 100 18 0 0 1 988.3533935546875 213.4612274169922 A 100 18 0 0 1 778.8464965820312 213.4612274169922 Z" style="fill: none; stroke: red; stroke-width: 2;"/><path id="text-path-1" d="M 664.5464477539062 37.96122741699219 A 100 19 0 0 1 876.5812377929688 37.96122741699219 A 100 19 0 0 1 664.5464477539062 37.96122741699219" style="fill: none; stroke: red; stroke-width: 2;"/><path id="text-path-2" d="M 765.3650512695312 211.70851135253906 A 100 17 0 0 1 991.5017700195312 211.70851135253906 A 100 17 0 0 1 765.3650512695312 211.70851135253906" style="fill: none; stroke: red; stroke-width: 2;"/><path id="path-1" d="M 765.3650512695312 211.70851135253906 A 100 17 0 0 1 991.5017700195312 211.70851135253906 A 100 17 0 0 1 765.3650512695312 211.70851135253906" style="fill: none; stroke: red; stroke-width: 2;"/></defs>

    and this:

    <div id='section-content-bottom'  class='avia-section av-hk7dm-1c9ac87f568f80d6eb00e9ca092e7b6f main_color avia-section-no-padding avia-no-border-styling  avia-builder-el-0  el_before_av_hr  avia-builder-el-first  section-content-bottom avia-full-stretch avia-bg-style-scroll av-minimum-height av-minimum-height-100  container_wrap fullsize'  data-section-bg-repeat='stretch' data-av_minimum_height_pc='100'><div class='avia-divider-svg avia-divider-svg-headereditfinal.svg avia-divider-svg-top avia-to-front avia-svg-original'><?xml version="1.0" encoding="utf-8"?>
<svg id="master-artboard" viewBox="0 0 1281.06005859375 75.33576202392578" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 0 0 1400 980;" width="1281.06005859375px" height="75.33576202392578px"><rect id="ee-background" x="0" y="0" width="1281.06005859375" height="75.33576202392578" style="fill: white; fill-opacity: 0; pointer-events: none;"/><defs><style id="ee-google-fonts">@import url(https://fonts.googleapis.com/css?family=Fjalla+One:400|Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic);</style></defs>

    For me it seems like that the fonts “Roboto”, “Anton” and “Fjalla One” are getting downloaded.

    I really cant find out why and where that happens. I already tried everything and i dont want to add another plugin that blocks those fonts for me.

    I also cloned my Homepage Site. Then i removed the SVG Separators in footer and header. So no google Fonts are loaded. That really seems odd and like a bug. I attached my copied version of my Homepage also.

    Im really thankful for your help!
    Best regards
    Jonas

    April 25, 2022 at 4:27 am #1349323
    Ismael

    Hi,

    Looks like the fonts are included in the svg file. It is possible that when creating the svg image, the editor added or used a text element and the editor automatically included a google font in the process.

    <style id="ee-google-fonts">@import url(https://fonts.googleapis.com/css?family=Anton:400|Roboto+Slab:100,300,400,700);</style>

    You may need to manually remove this code from the svg file.

    Best regards,
    Ismael

    May 8, 2022 at 1:12 pm #1350942
    Jonas
    Guest

    thank you!
    i didnt know about that!
    works perfectly now.

    Best regards
    Jonas

    May 8, 2022 at 5:03 pm #1350953
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    May 8, 2022 at 9:52 pm #1350971
    Jonas
    Guest

    you can close it! :)

    May 9, 2022 at 6:53 am #1350999
    Ismael

    Hi,

    Alrighty then! Please let us know if you have more questions regarding the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Custom SVG not owkring’ is closed to new replies.