Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
  • #1311093

    is there an example to implement custom svgs.


    Hey Guenter,

    Yes, in our docu:

    Best regards,




    ok – thanks
    Unfortunately, the color setting on paths in defs has no effect.
    Therefore it is a bit more complex with the waves-in-motion.
    The svg must comply with the Enfold criteria.

    Maybe it would be better to give the fill to the svg itself as inline style – all svgs must be monochromatic with your settings – and only fill-opacity is changing somethimes.

    btw: on svg the opacity is set via : fill-opacity="0.5" not by style attribute

    This would also have been addressable in my “waves-in-motion” via alb.

    PS : i shift the custom uploads dir for custom svg to the uploads dir.
    so i can upload them via Media Library. ( works only if you do not use the month and year based option )

    add_filter( 'avf_custom_svg_shapes_files_directory', 'my_svg_path', 10, 1 );
    function my_svg_path(){
      $path = get_site_url().'/wp-content/uploads';
          return $path;
    • This reply was modified 1 month, 3 weeks ago by  Guenni007.

    Next note: Do you think it makes sense that if a bottom svg is set – the “Bottom Border Styling section” can be set as well?
    In my opinion, the svg “tilt” could do the job too – and better – the angle is a matter of svg height.
    For backwards compatibility, it makes sense to keep the “Bottom Border Styling section” option, but then hide it when a bottom svg is set.
    Only if you like to use a gradient as slant – it makes sense.



    Thanks a lot for the feedback.

    I opened an issue in our dev repo to implement these improvements.

    upload via Media Library

    I can add “attachment_id” as additional parameter to shape definition – to be independent from uploader directory structure.

    Best regards,


    What would be important is the change to give the fill attribute not to the path – because not all svg’s have path – there are polygone, circle, rect, etc. pp.
    if you change the fill attribute to the svg itself – it will work too for all those svg.

    i changed in column.php and section.php to :

    $element_styling->add_callback_styles( 'divider-top-svg', array( 'svg_div_top_color' ) );
    $element_styling->add_callback_styles( 'divider-bottom-svg', array( 'svg_div_bottom_color' ) );

    and removed the ‘divider-bottom-svg-path’ in the selectors array.

    for that change you have to remove the default fill setting in shortcodes.css
    /*.avia-divider-svg .avia-divider-fill*/

    see here:

    you then even can use as custom svg f.e.: ( see on example page just before footer) – and waves-in-motion will work too!
    (all vectors without fill attribute are filles black on default – and this field forms the connection to the background-color of the previous (top-svg) or following ( bottom-svg ) section. )

    see on the bottom
    only those path, polygone, circle etc. pp are overwritten by svg fill attribute that have no inline fill style.



    Thanks for this. See below.

    Best regards,


    Danke – habs am laufen (4.8.5), und du siehst es geht auf Anhieb. Auch mit den Waves-in-Motion.
    Komme heute noch nicht zum Testen, werde hier berichten.


    Why is the media uploader structure independent when assigning a media attachment ID ?

    • This reply was modified 1 month, 3 weeks ago by  Guenni007.


    Why is the media uploader structure independent when assigning a media attachment ID

    If you look at config-templatebuilder\avia-template-builder\php\class-svg-shapes.php line 120ff you see the structure for defining you custom shape (added with 4.8.5):

    		 'attachment'		=> int			attachment id of uploaded media
    		 'attachment_negative'	=> int			attachment id of negative uploaded media

    The attachment ID has info to the path of the uploaded file. When using ID’s ‘path’ and ‘filename’ are ignored.

    Best regards,


    aha .



    Best regards,





    Best regards,





    beim Triangle and Triangle asymmetrical kannst du das gut sehen was es bringt.
    während bottom unverändert in der Höhe bleibt, ergibt sich bei top eher eine Natürlichkeit – vor allem , wenn die color-section nicht auf einen festen Wert gesetzt wird.

    • This reply was modified 1 month, 3 weeks ago by  Guenni007.


    Best regards,


    Finde ich auch. – ich denke damit kann man jetzt wirklich viel abdecken an styling optionen.
    Danke für die Umsetzung, welche ich aber auch glaube durchaus Sinn macht.



    Ja, macht Sinn und ist glaub ich eine wichtige Erweiterung.

    Wann immer Du Fragen hast bezügl. Code, …. kannst Du gerne auf mich zukommen (meine E-Mail hast Du jetzt auch).

    Ich schliesse dieses Topic.

    Einen schönen Abend noch.

    LG aus Wien

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘how to use : avf_custom_svg_shapes’ is closed to new replies.