Questions tagged [svg]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
1 vote
1 answer
29 views

How do I link an image in a svg file in wordpress?

I'm trying to use a svg file that contains a vector and an image, the problem however is that the linked image in the svg won't load. The vector part of the svg is loading however. I figure the ...
koeliga's user avatar
  • 11
0 votes
0 answers
67 views

why I could not use <svg> data in WordPress additional css part

I was reading this article to customize the bullet lists (li tags) in my posts in a WordPress website. But when I want to add these CSS codes: li{ list-style-image: url('data:image/svg+xml,<svg ...
hamid-davodi's user avatar
0 votes
0 answers
48 views

Undefined array key "width" in wp-admin/includes/image.php error when publishing post or page

When publishing a post or page that includes trusted SVG files in the content, WordPress spits out the errors Undefined array key "width" in wp-admin/includes/image.php and Undefined array ...
Motivated's user avatar
  • 205
0 votes
1 answer
39 views

Customize all image captions

Is there anyway to add smth like a SVG to all image captions of my website? Smth like the camera logo under this photo.
Poorya Ghorbani's user avatar
0 votes
0 answers
28 views

Interactive SVG not showing

I have a problem with implementation interactive svg to our website. In the page edit view (elementor) the file works fine, it displays and there is an animation on hover. But after save and check ...
MIchal's user avatar
  • 1
0 votes
1 answer
34 views

Why isn't my SVG path rotating on scroll on iPhones?

I'm trying to get a path inside an inline SVG in the Header of my website to rotate when the user scrolls the page. It's a really neat feature, but it's not working on some iPhones. Here's the ...
ThatJonWilson's user avatar
0 votes
2 answers
953 views

Can't upload svg files in WordPress

I am facing the following issue while uploading any SVG file and sometimes face the same issue while uploading any image. "The server cannot process the image. This can happen if the server is ...
Nader Amer's user avatar
0 votes
1 answer
79 views

SVG Icon Code Support in WordPress Custom Html Widget? Not Working

I am Trying to Add SVG Icon Code in Custom HTML Widget, it is not working showing following error "There is 1 error which must be fixed before you can save.". How we can fix it without ...
Islamic Quran Center's user avatar
0 votes
2 answers
176 views

Why are some SVG-images not visible in my footer?

On our website, we have a footer (built with WP-Bakery) that includes the typical information that is needed, plus there is a section that should show the different types of payment methods that we ...
topkek's user avatar
  • 1
0 votes
1 answer
204 views

How to prevent Wordpress to remove my embedded SVG images

I run my own wordpress (not on wordpress.com) I'm trying to minimize the number of image files and embed some very small images directly into HTML code using the classic editor. However, when I save ...
Artem's user avatar
  • 101
2 votes
1 answer
840 views

How to remove SVG Files inline code of Wordpress Footer?

After the latest update of WordPress version 5.9, I saw that there was a svg files added at the bottom of the page. Can you please tell me, how to remove this? What's the use of it?
Juniper Scott's user avatar
0 votes
1 answer
50 views

How to upload and style svg logo?

WP beginner here. I'm trying to upload an svg logo to my site. The logo can be accessed here. If you open it in the browser and inspect it, it should show the svg tags around the object. I've ...
Artur Müller Romanov's user avatar
0 votes
2 answers
293 views

download svg to png size image

I would like to have an svg downloaded from my site as a png. Searching I found this code and I must say that everything works. The site is a project that will only be viewed from mobile https://7c81b....
bastiag5's user avatar
0 votes
1 answer
713 views

Replace custom SVG icons in Twenty Twenty-One

I was trying to investigate how to replace some icons of the parent theme with the child theme but I was not able to do it. I am trying to replace the SVG icons that are in the twentytwentyone\classes\...
Yache's user avatar
  • 3
0 votes
1 answer
920 views

How do I include SVG file used as featured image?

I'm new, can I use include() or get_template_part to load an SVG file uploaded as featured image directly in the HTML page? I need to animate the svg images, but i need to easily change the image on ...
Alessio Paoletti's user avatar
0 votes
1 answer
1k views

SVG upload does not work

I have created an SVG with clickable areas to be used as landing page image, The size of the file is 4 MB. I cannot upload it, Wordpess says there is an error (no specifics). Size seems not to be the ...
Ulrich Sommer's user avatar
0 votes
1 answer
1k views

Upload Custom Mime Types in WordPress (SVG, WebP)

I have a plugin I created to allow for us to add additional image types (webp, svg, etc). For some reason it is failing and will not allow me to add svg. Could use an extra set of eyes on this one ...
elke_wtf's user avatar
  • 423
0 votes
1 answer
318 views

Whitelist a single SVG for use in post_content

I have a block built in Gutenberg - in it I use an Icon element from '@wordpress/components' I use a single arrow to create a dropdown which renders as an SVG. Of course when anyone who is not a super ...
Bysander's user avatar
  • 1,225
0 votes
1 answer
96 views

Hover a css icon width other color inside wp_get_attachment_image

I'm using ACF and have inside a loop: <?php echo wp_get_attachment_image( $button_image, 'small', 'sidebar-btn-icon', ["class" => "sidebar-btn-icon" , "alt"=> &...
Bouke's user avatar
  • 1
1 vote
0 answers
227 views

Use Icomoon external svg file with <use>

Try to load external SVG icon with no html coding, just using my child functions.php file. I can get the icon with link to be "clickable", so link to e.g. Facebook is working, can set ...
Daron's user avatar
  • 11
0 votes
0 answers
200 views

Completely remove SVG icon load in child theme of Twenty Twenty-one theme

How to Completely remove SVG icon load in child theme of the Twenty Twenty-one theme?
Tara's user avatar
  • 868
0 votes
1 answer
2k views

How to use Illustrator AI file to design a Wordpress website

I am very new to Wordpress. I have an AI file and I am supposed to build a website out of it. Just have some difficulties in doing that. I select some slices in Adobe Illustrator and export them into ...
Davood Kazemi's user avatar
0 votes
2 answers
1k views

SVG not displaying in Media Tab in Backend

I addes this code to allow SVG Uploads to the Media Library of wordpress: function upload_svg ( $svg_mime ){ $svg_mime['svg'] = 'image/svg+xml'; return $svg_mime; } add_filter( 'upload_mimes', '...
Niqql's user avatar
  • 53
3 votes
1 answer
7k views

Allowing SVG uploads in media uploader without plug-in

I have previously managed to utilise this block of code within my functions.php file to enable and create thumbnails for SVGs that are uploaded to my site: // ALLOW SVG function ...
Jason Is My Name's user avatar
0 votes
1 answer
3k views

change with CSS the color of an svg background image set with "background-image: url()"

does anyone knows if it is possible to change the color (the stroke and fill attributes) of a SVG illustration used as a background with background-image: url() directly via CSS? Thank you
Dande's user avatar
  • 25
0 votes
2 answers
232 views

SVG icons in Twenty Nineteen

The Twenty Nineteen theme uses SVG for its social icons. For example, this is the code for the Google icon: <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
leemon's user avatar
  • 1,848
0 votes
1 answer
120 views

SVG Upload to WordPress Issue

So I added this code to my Functions.php file and all of a sudden I can upload SVG's across my entire server, all my clients websites. I know there are security disclaimers regarding using this code. ...
Anthony Valentine's user avatar
0 votes
1 answer
363 views

Swap SVG icons in child themes

The Twenty Nineteen theme uses inline SVG for its icons instead of icon fonts. The icons are added to the HTML code with the TwentyNineteen_SVG_Icons::get_svg() function. public static function ...
leemon's user avatar
  • 1,848
0 votes
0 answers
763 views

Create Gutenburg Block to render inline SVG

I have been creating custom Gutenberg blocks for projects and I want to create a simple block to add inline SVG code that renders in the block builder and the front-end. Would I create a element to ...
houstonaspen's user avatar
0 votes
1 answer
112 views

How can I change this SVG shape that's generated?

I have a website I'm customizing for a client, and I'll admit I'm not too skilled with generating SVGs. The site -- LINKED HERE uses a theme that has a built-in review feature and it currently uses a ...
M. Straw's user avatar
  • 119
2 votes
1 answer
1k views

Featured Image .svg height and width 1px only

I need to create a custom type post where will be added the name of the client and its logo. The logo will be added as a Featured Image. But the problem is that WordPress does not recognize the SVG ...
danihazler's user avatar
0 votes
1 answer
598 views

Wordpress Block.js SVG createElement

I have an svg image I have created with the following code as example: <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.79 38.77"> <defs> <style&...
Vil Ignoble's user avatar
0 votes
2 answers
2k views

Expected an identifier and instead saw '<'

I am having difficulty adding a custom svg icon to my Wordpress Plugin, I read on this page https://developer.wordpress.org/block-editor/components/icon/ that to add a custom svg icon to my plugin for ...
Vil Ignoble's user avatar
1 vote
1 answer
421 views

Insert SVG code (not img) in HTML block

I want to insert svg code in a Guttenberg HTML block. I don't want it as an image because I want to manipulate it with CSS. If I insert svg, all tag diseappears and I have only the text which was ...
Alysko's user avatar
  • 136
0 votes
1 answer
94 views

import svg-files from wxr - (upload works, import not)

Upload works - Import from wxr not We're updating several sites with a new page, imported from a wxr file. Page, included form, jpg, png - all work fine but SVG not so much. I've checked scripts ...
Leif S.'s user avatar
  • 23
0 votes
1 answer
1k views

SVG in list-style-image breaks when adding fill

I'm trying to add a custom bullet using CSS list-style-image. Here is the attribute: ul { list-style-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='...
John Doe's user avatar
  • 287
1 vote
0 answers
56 views

Add other social networks to TwentyNineteen_SVG_Icons class in child theme?

I'm trying to add items to the $social_icons_map and $social_icons arrays in class-twentynineteen-svg-icons.php I know I need to do it in the functions.php file of my child theme. I think I need to ...
whakawaehere's user avatar
0 votes
1 answer
2k views

Add custom SVG icons to Social Icon MENU in WordPress Twenty Seventeen Child Theme

I'm having trouble adding custom SVG icons to the Social Icon Menu in WordPress Twentyseventeen Child Theme.The menu works fine with all pre-packaged SVGs included with the theme, but I can't add ...
Kelly's user avatar
  • 291
3 votes
2 answers
3k views

Why does SVG upload in Media Library fail if the file does not have an XML tag at the beginning?

I have enabled SVG uploads using this code: add_filter('upload_mimes', function($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; }); However, uploads of SVG files that start with the &...
Theo d'Or's user avatar
  • 168
0 votes
1 answer
484 views

Are SVG image files safe to upload? Why WP defines them as a security risk? [duplicate]

I'd like to upload a map of the USA in a SVG format however I am prevented from doing so because of a 'security risk'. Any ideas why this is? Is it safe to do so? Thanks
Henry's user avatar
  • 983
1 vote
1 answer
1k views

Adding extra SVGs to TwentyNineteen child theme using class TwentyNineteen_SVG_Icons

I’m trying to change the svg of the ellipses for the mobile menu. It’s called in this file: template-functions.php so I did a hook on my child theme functions.php to replace it, like so: function ...
Duarte Nunes's user avatar
0 votes
1 answer
32 views

Add a svg and show some text on the parts of that view when the user hover or click on that part in WordPress

I am working in my WordPress website and I want to add a svg to my website and show some text on the parts of that view when the user hover or click on that part in WordPress. I have searched a lot ...
Rahul Pamnani's user avatar
0 votes
1 answer
29 views

Replace Home with image link inside custom header menu

What I want to achieve is a header menu like this: Right now, I have this: I am not far off. To get to where I am currently at, I followed these instructions and added some custom CSS. So I added ...
J86's user avatar
  • 135
1 vote
2 answers
2k views

SVG Featured image not shown in twitter

I have a post with a featured image (size 736x212). The post url is this. I shared my post on twitter, but the tweet doesn't show the image (if you want to check click here). What could be the problem?...
Federico Taschin's user avatar
4 votes
2 answers
1k views

getting uploaded SVG dimensions on front-end

Having successfully uploaded an SVG image through WordPress's back-end media uploader with the help of a third party plugin such as Safe SVG by Daryll Doyle, how can one get the image's dimensions ...
Vadim H's user avatar
  • 143
0 votes
1 answer
849 views

Wordpress search form and input type="image"

I need help with this code. How can I get the search field to display when clicking on the search-icon.svg? <form role="search" method="get" class="search-form" action="<?php echo home_url( '/...
Eva's user avatar
  • 21
7 votes
6 answers
15k views

How to upload SVG in WordPress 4.9.8?

I tried uploading after installing different plugins. Even added a filter to functions.php file. function add_svg_to_upload_mimes( $upload_mimes ) { $upload_mimes['svg'] = 'image/svg+xml'; ...
Sarath's user avatar
  • 183
0 votes
1 answer
2k views

Enable CORS for getting an inline SVG by URL

TLDR; Is there a way I can enable CORS for SVGs in my WordPress back-end, so I can get them through a http request to a different domain? Ideally without having to touch .htaccess? What I'm aiming ...
Petr Cibulka's user avatar
6 votes
2 answers
4k views

Escaping SVG with KSES

I'm trying to output an SVG file in a template, and PHPCS is telling me I need to escape the output. So I tried with KSES and it doesn't seem to want to include the viewbox attribute. $allowed_html =...
Picard102's user avatar
  • 933
5 votes
2 answers
696 views

Tiny MCE editor stripping xlink:href parameter from SVG USE tag

I have an inline SVG tag with an embedded <USE> tag. HTML: <ul> <li><svg class="icon-user"><use xlink:href="#icon-user"></use></svg> My Account</li>...
Kathryn Wilson's user avatar