The SVG control lets you select an SVG (Scalable Vector Graphic) file from the media library. The selected SVG returns an array with the following keys:
id
(media library item ID)filename
url
We recommend to render the SVG inline as shown in the code example below. This way you can easily customize it via CSS.
class Prefix_Element_Svg extends BricksElement { // Set builder controls public function set_controls() { $this->controls['exampleSvg'] = [ 'tab' => 'content', 'type' => 'svg', ]; } // Render element HTML public function render() { if ( isset( $this->settings['exampleSvg']['url'] ) ) { echo file_get_contents( esc_url( $this->settings['exampleSvg']['url'] ) ); } else { esc_html_e( 'No SVG selected.', 'bricks' ); } } }