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.
list_svg()
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
The 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
Most modern themes are using the_custom_logo() function to display the logo, so here I hook into the function through get_custom_logo filter to change it.
Demo
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.