I’ve established this is a plugin/theme conflict. I will report back when I know more. I tested this on a couple of my other client’s websites that are on different servers but share similar themes/plugins, and sure enough, I can upload SVGs.
You shouldn’t need to change the viewbox attribute. You can probably just use it. The way I think about is SVGs are like they are drawn on graph paper. The viewbox sets out how many squares there are on the paper and the the path in your examples above are the guides to where to … Read more
This is the solution to allow SVG upload and preview to Media area of WordPress: https://gist.github.com/benfrain/9422862
Completely remove SVG icon load in child theme of Twenty Twenty-one theme
On :hover you should change the svg-image, not the color. The second image is a copy with a different color. For example, if your image is shown in the background, you can change the style in this way: .sidebar-btn-icon:hover { background-image: url(button_image_red.svg’); }
The question changed somewhat to what was asked – however thought this might be useful if some other mug gets carried away with react in their save functions. So – this was solved as @Tom J Nowell suggested and a PHP callback was made instead to allow the save instead. I deprecated the block and … Read more
WordPress doesn’t allow to upload SVG files by default. Add svg file type in allowed file types list function wp_mime_types($mimes) { $mimes[‘svg’] = ‘image/svg+xml’; return $mimes; } add_filter(‘upload_mimes’, ‘wp_mime_types’); Fix for displaying svg files in media library function wp_fix_svg() { echo ‘<style type=”text/css”> .attachment-266×266, .thumbnail img { width: 100% !important; height: auto !important; } </style>’; … Read more
That’s not how that file works, and including it will just load the class definition, it won’t create a Twenty_Twenty_One_Child_SVG_Icons object or override Twenty_Twenty_One_SVG_Icons. It’s also not how child themes work. Child themes let you override templates specifically, not arbitrary files and classes. Instead, use the twenty_twenty_one_svg_icons_{$group} filters to modify the array in your child … Read more
const w = parseInt(svg.getAttribute(‘width’)); const h = parseInt(svg.getAttribute(‘height’)); Change those 2 lines so that w and h have the desired values. E.g. const w = 101; Will make the result 101 pixels wide
There are a number of caching plugins that may work for you, or build the data on the admin side when posts are added/updated and save it in an option.