Another proof of concept.
The custom control
You create aÂ custom control by extending the WP_Customize_Control class. I check for WP_Customizer_Control existence before adding custom control because WP_Customize_Control is loaded on customizer page only.
Create a option list with URLs to SVG files. The SVG files are defined in svg.json
You should only add SVG’s that you created or at least trust the content of.
That’s the reasonÂ I’m not using the media manager to add the SVG, Â they are very unsecure.
svg.jsonÂ file has the relative path to each logo
The Image Picker jQuery plugin
Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
Worth noting here is the
$("#selected_svg").change();,Â it triggers Save & Publish in the customizer.
Adding the custom control to the customizer
Answering the postmessage
Using postmessage, I’m updating the SVG URL in the preview using the JavaSript below. ‘svg_logo_url’ is the name of the setting, as added by the $wp_customize->add_setting call above.
Adding the SVG logo to the theme
I’ve added the custom control to theÂ 2016-customizer-demo theme. The files used are `functions.php`, `svg.json`, `svg/*.svg`, `js/customizer.js` and image picker plugin in the `js/image-picker` folder.