- This topic has 6 replies, 4 voices, and was last updated 2 years, 7 months ago by Elvin.
-
AuthorPosts
-
June 19, 2021 at 12:40 am #1827275Rekindle
Hi, I’m using inline SVG icons across my site (another reason to love GeneratePress & GenerateBlocks!).
For some reason, I’m able to change the size and color of some icons but not those of others. Do you know why this might be happening? Can I edit the SVG in any way to make it work?
Here are a couple of examples.
Able to resize and ‘recolor’: <svg viewBox=”0 0 500 500″ xmlns=”http://www.w3.org/2000/svg”><g><circle cx=”380.568″ cy=”116.374″ r=”44.406″></circle><path d=”M480.656 164.895c-10.452-11.017-27.859-11.478-38.877-1.023l-46.84 44.437L264.622 82.028c-10.59-10.262-27.39-10.345-38.081-.185l-78.475 74.576c-11.009 10.462-11.452 27.869-.99 38.878 10.464 11.011 27.869 11.453 38.879.99L245.3 139.89l26.202 25.39-94.503 93.833a27.445 27.445 0 00-2.776 3.22l-57.059 77.568-90.955 69.264c-12.083 9.202-14.419 26.456-5.218 38.539 5.412 7.106 13.607 10.841 21.899 10.841a27.385 27.385 0 0016.641-5.623l94.103-71.661a27.513 27.513 0 005.491-5.583l53.799-73.137 70.186 20.83-45.549 42.653c-11.086 10.381-11.657 27.784-1.276 38.87 5.414 5.782 12.737 8.704 20.079 8.703 6.735 0 13.486-2.46 18.791-7.427l80.563-75.441a27.501 27.501 0 00-10.972-46.437l-40.957-12.156 39.351-37.44 32.464 31.458a27.42 27.42 0 0019.138 7.751 27.421 27.421 0 0018.926-7.55l65.968-62.584c11.015-10.452 11.473-27.857 1.02-38.876zM282.788 62.774c23.133 1.726 41.426 5.583 53.346 10.971 4.724 2.136 9.65-2.537 7.672-7.33-5.813-14.084-17.253-32.153-37.672-32.048-22.597.116-35.372-4.132-41.635-10.969-2.293-2.504-6.462-1.097-6.604 2.295-.605 14.468 2.461 35.407 24.893 37.081z”></path></g></svg>
Unable to resize or recolor: <?xml version=”1.0″ ?><svg baseProfile=”tiny” height=”64px” version=”1.2″ viewBox=”0 0 64 64″ width=”64px” xml:space=”preserve” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”><g id=”_x36_4px_boxes”><rect fill=”none” height=”64″ width=”64″/></g><g id=”Production”><g><path d=”M49.8408,23.1384c-0.0034-0.4138-0.3394-0.7483-0.7539-0.7483c-0.0554,0-0.1094,0.0063-0.1611,0.0176 l-7.9526,1.4734c-1.3027,0.2217-2.512-0.1528-3.1284-1.0774c-0.7417-1.1129-0.5466-2.284,0.5659-3.865 c0.8291-1.1776,1.6035-3.0615,1.6035-4.6382c0-3.9333-3.0361-7.1221-6.7817-7.1221c-3.7454,0-6.7817,3.1888-6.7817,7.1221 c0,1.5767,0.7749,3.4606,1.6035,4.6382c1.1125,1.581,1.3076,2.7521,0.5659,3.865c-0.6165,0.9246-1.7949,1.2689-3.1282,1.0774 l-9.4893-1.4801c-0.0002,0.0007-0.0857-0.0099-0.1301-0.0099c-0.4009,0-0.7278,0.313-0.752,0.7079l-0.917,9.6519 c-0.1536,1.3296,0.146,2.4,1.0295,2.9891c1.0632,0.7087,2.1821,0.5222,3.6926-0.5408c1.1255-0.7917,2.9255-1.5322,4.4321-1.5322 c3.7583,0,6.8052,2.9014,6.8052,6.4799c0,3.5789-3.0469,6.4803-6.8052,6.4803c-1.5063,0-3.3066-0.7405-4.4321-1.5322 c-1.5105-1.0632-2.6294-1.2495-3.6926-0.5408c-0.8835,0.5891-1.2031,1.5374-1.0295,2.989l0.9189,8.5851 c0.0312,0.3879,0.3555,0.6932,0.7515,0.6932c0.0015,0,29.9194,0,29.9194,0c2.2358,0,4.0483-1.8257,4.0483-4.0615L49.8408,23.1384z ” fill=”#565D64″/></g></g></svg>
p.s. I bought both of these icons from iconfinder.com, so hopefully they’re not too mutually inconsistent.
Thanks!
June 19, 2021 at 1:03 am #1827284RekindleFigured this out. I changed the width and height attributes, and removed the fill property.
June 19, 2021 at 6:16 am #1827487DavidStaffCustomer SupportGlad to hear that!
August 1, 2021 at 6:57 pm #1879875AlanHi.
I have located some SVG Icons and I was trying to add them to some info boxes by pasting the markup into GenerateBlocks Icon SVG HTML. When I viewed the icon I realised that I can only see half of the icon. I downloaded the SVG icons from the Noun Project and they are all 100 x 100.
I have watched the video “Using Custom SVG Icons” but I can’t work out what size icons I need and how to actually resize the icons. Is it just a case of changing the width , height and removing the fill as was mentioned above?
The SVG File is
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M96.7,64.3L84,52.6V21.8c0-2.8-2.1-4.8-5.1-4.8h-3.4h-6H69c0-2.1-1.9-4-4-4H35c-2.1,0-4,1.9-4,4h-0.4h-6h-3.4 c-3,0-5.1,2-5.1,4.8v30.7L3.3,64.3C3.2,64.4,2,65.7,2,68c0,2.2,1.8,4,4,4h88c2.2,0,4-1.8,4-4C98,65.7,96.8,64.4,96.7,64.3z M82,21.8V52h-2V21.8c0-1.1-0.3-2-0.8-2.8C80.9,19.2,82,20.2,82,21.8z M78,21.8V52h-5V21.8c0-1.1-0.2-2.1-0.6-2.8h3 C77,19,78,20.1,78,21.8z M69.4,19c1.1,0,1.6,1.4,1.6,2.8V52H60V19H69.4z M42,19h16v33H42V19z M35,15h30c1,0,2,1,2,2h-7H40h-7 C33,16,34,15,35,15z M40,19v33H29V21.8c0-1.4,0.5-2.8,1.6-2.8H40z M27.6,19c-0.4,0.8-0.6,1.7-0.6,2.8V52h-5V21.8 c0-1.7,1-2.8,2.6-2.8H27.6z M18,21.8c0-1.6,1.1-2.7,2.8-2.8c-0.5,0.8-0.8,1.7-0.8,2.8V52h-2V21.8z M94,70H6c-1.1,0-2-0.9-2-2 c0-1.5,0.7-2.3,0.7-2.3L17.4,54h65.2l12.7,11.7c0.1,0.1,0.7,0.9,0.7,2.3C96,69.1,95.1,70,94,70z"></path><path d="M57,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C58,75.4,57.6,75,57,75z"></path><path d="M43,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C44,75.4,43.6,75,43,75z"></path><path d="M71,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C72,75.4,71.6,75,71,75z"></path><path d="M85,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C86,75.4,85.6,75,85,75z"></path><path d="M15,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C16,75.4,15.6,75,15,75z"></path><path d="M29,75c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1s1-0.4,1-1V76C30,75.4,29.6,75,29,75z"></path></g></svg>
Also do these icons slow the page loading speed of a website in any measurable way?
Thanks,
Alan
August 1, 2021 at 9:06 pm #1879957ElvinStaffCustomer SupportHi Alan,
can you open a new topic for this? So you can use the private information text field to link us to the page in question. Also, to prevent this resolved topic from being convoluted. Thank you. ๐
August 2, 2021 at 1:53 am #1880214AlanNo worries Elvin.
I have started a new topic.
Thanks
August 2, 2021 at 7:39 pm #1881401ElvinStaffCustomer SupportNo problem. Thanks. ๐
-
AuthorPosts
- You must be logged in to reply to this topic.