Hello,
We apologize for the issue you are facing with using an SVG as a separator icon for breadcrumbs. Currently, the options for setting a separator character in Rank Math’s breadcrumbs do not explicitly mention support for SVG files. Typically, you can choose from various characters or type your own separator character, but SVG support may not be included.
If you would like to explore this further or have specific requirements, we recommend replying to this ticket, and a human agent from the Rank Math Support team will assist you with your query.
Thank you for raising this concern!
Hello,
Thank you so much for getting in touch.
At the moment, the separator settings in the filter hook will not accept svg elements. However, we can modify the actual HTML of the breadcrumbs before we render it to the frontend. You may refer to the filter code below instead:
add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
$custom_separator = '<span class="separator"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>';
$html = preg_replace( '/<span class="separator">.*?<\/span>/', $custom_separator, $html );
return $html;
}, 10, 3 );
Hope that helps.
Hello,
We are super happy that we have addressed your concern. If you have any other questions in the future, know that we are here to help you.
If you don’t mind us asking, could you please leave us a review (if you haven’t already) on
https://wordpress.org/support/plugin/seo-by-rank-math/reviews/#new-post
about your overall experience with Rank Math? We appreciate your time and patience.
If you have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.
Thank you.
