[Resolved] Unable to change size and color of some SVG icons.

Home Forums Support [Resolved] Unable to change size and color of some SVG icons.

Home Forums Support Unable to change size and color of some SVG icons.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1827275
    Rekindle

    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&#8221; 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!

    #1827284
    Rekindle

    Figured this out. I changed the width and height attributes, and removed the fill property.

    #1827487
    David
    Staff
    Customer Support

    Glad to hear that!

    #1879875
    Alan

    Hi.

    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

    #1879957
    Elvin
    Staff
    Customer Support

    Hi 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. ๐Ÿ˜€

    #1880214
    Alan

    No worries Elvin.

    I have started a new topic.

    Thanks

    #1881401
    Elvin
    Staff
    Customer Support

    No problem. Thanks. ๐Ÿ˜€

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.