[Resolved] Replacing SVG’s

[Dan King]

Hello,

I’m using your theme that has .svg as images and icons and i want replace the icon…

This is the current code:

<svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 39.813 50″><path d=”M27.149 17.726v.942a3.506 3.506 0 00.679 6.947 2.15 2.15 0 01.02 4.298l-.02-.001-.02.001a2.15 2.15 0 01-2.129-2.149.679.679 0 00-1.358 0 3.512 3.512 0 002.828 3.44v1.07a.679.679 0 001.358 0v-1.07a3.506 3.506 0 00-.679-6.947 2.149 2.149 0 112.149-2.149.679.679 0 001.358 0 3.512 3.512 0 00-2.828-3.44v-.941a.679.679 0 00-1.358-.001z”></path><path d=”M5.204 50h18.1a5.21 5.21 0 005.204-5.204v-7.825c6.612-.378 11.665-6.045 11.287-12.656a11.992 11.992 0 00-11.287-11.287V5.204A5.21 5.21 0 0023.304 0h-18.1A5.21 5.21 0 000 5.204v39.593A5.209 5.209 0 005.204 50zm33.258-25c0 5.873-4.761 10.633-10.633 10.633S17.195 30.873 17.195 25s4.761-10.633 10.633-10.633c5.87.006 10.627 4.763 10.634 10.633zM5.204 1.357h18.1a3.85 3.85 0 013.846 3.846v1.584h-1.584a.679.679 0 000 1.358h1.584v4.884c-6.612.378-11.665 6.045-11.287 12.656A11.992 11.992 0 0027.15 36.972v3.526H1.357V8.145h18.439a.679.679 0 000-1.358H1.357V5.204a3.852 3.852 0 013.847-3.847zM1.357 41.855h25.792v2.941a3.85 3.85 0 01-3.846 3.846h-18.1a3.85 3.85 0 01-3.846-3.846v-2.941z”></path><path d=”M22.025 8.145h1.257a.679.679 0 000-1.358h-1.257a.679.679 0 000 1.358zM14.253 47.624a2.376 2.376 0 100-4.753 2.376 2.376 0 000 4.753zm0-3.393a1.018 1.018 0 110 2.037 1.018 1.018 0 010-2.037z”></path></svg>

I wanted to replace the icon with this:

https://learnclub.co.uk/wp-content/uploads/2020/12/gem.svg

I tried the obvious but nothing happened…

https://learnclub.co.uk/c-learn-club-home-test-page/

Thanks!

Dan

[David]

Hi there,

you can use this site to upload your SVG

https://jakearchibald.github.io/svgomg/

– then click on the Markup tab and copy and paste <svg> code it provides.

[Dan King]

oh wow! BOOOOOOOM you’re amazing thank you!

Dan :-))))

[David]

haha – glad to be of help

[Oscar]

Hello David, I’m trying to use my own SVG icons, using the tool you recommended to Dan (https://jakearchibald.github.io/svgomg/) but when I add the code the size of the icon is too small.
You can see the site where I’m using it: https://brightled-3d9351.ingress-alpha.easywp.com/servicios/
I have translated changing the height and width to 1em and 2em, however I can’t get a correct view of the icon.

Would you please help me.

[Elvin]

Hi,

I have translated changing the height and width to 1em and 2em, however I can’t get a correct view of the icon.

You’ll have to change both width and height if you want the svg size to change because the SVG respects its aspect ratio.

Try changing both width and height to 2em. You should see the SVG change in size once you do. 😀

[Oscar]

Hi Elvin, I changed the width and height.
And yes, I’ve clear chache
This is the code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1em" height="1em" viewBox="0 0 600 600" xml:space="preserve"> <image overflow="visible" width="2em" height="2em" xlink:href="data:image/png;base64,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 HU6MoAMTR9Th+Ak6MJFEHY6PoAMTS9Th2Ak6MNFEHY6NoAMTT9ThWxN0YFMQdbhrgg5sGqIOd07Q gU1F1OGOCTqw6Yg6/EuCDmxKog63JejApiXqcCtBBzY1UYdbCDqw6Yk6CDqwRYg6007QgS1D1Jlm gg5sKaLOtOp1fQGAJm1fWnlVRby663vAuHlCB7akSXxS93ROmwQd2LImKepiTtsEHdjSJiHqYs44 CDqw5XUZdTFnXAQdmApdRF3MGSdBB6bGOKMu5oyboANTZRxRF3O6IOjA1Gkz6mJOVwQdmEptRF3M 6ZKgA1OryaiLOV0TdGCqNRF1MWcSCDow9e5O1MWcSSHoAHFiURdzJomgA3zD8URdzJk0gg7wTY4l 6mLOJBJ0gNu5q6iLOZNK0AHuwB1FXcwBYBM6vLz4qrXlxVpbXqzDy4tCDgCb1eHlxVeJOQAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA ABH/Dy4rolCnQmvhAAAEa2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2lu PSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4 PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcv MTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9 JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgog IDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVz b3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDIwLTEyLTI4PC9BdHRyaWI6Q3JlYXRlZD4K ICAgICA8QXR0cmliOkV4dElkPjk4ODRiYWJlLTQ4ZTctNGIwYi1iYzY2LTc4NWE1ZTEwODkzZjwv QXR0cmliOkV4dElkPgogICAgIDxBdHRyaWI6RmJJZD41MjUyNjU5MTQxNzk1ODA8L0F0dHJpYjpG YklkPgogICAgIDxBdHRyaWI6VG91Y2hUeXBlPjI8L0F0dHJpYjpUb3VjaFR5cGU+CiAgICA8L3Jk ZjpsaT4KICAgPC9yZGY6U2VxPgogIDwvQXR0cmliOkFkcz4KIDwvcmRmOkRlc2NyaXB0aW9uPgoK IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PScnCiAgeG1sbnM6ZGM9J2h0dHA6Ly9wdXJsLm9y Zy9kYy9lbGVtZW50cy8xLjEvJz4KICA8ZGM6dGl0bGU+CiAgIDxyZGY6QWx0PgogICAgPHJkZjps aSB4bWw6bGFuZz0neC1kZWZhdWx0Jz5JY29ub3MgLSBCTENvPC9yZGY6bGk+CiAgIDwvcmRmOkFs dD4KICA8L2RjOnRpdGxlPgogPC9yZGY6RGVzY3JpcHRpb24+CgogPHJkZjpEZXNjcmlwdGlvbiBy ZGY6YWJvdXQ9JycKICB4bWxuczpwZGY9J2h0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8nPgog IDxwZGY6QXV0aG9yPk1leSBDdWFkcmE8L3BkZjpBdXRob3I+CiA8L3JkZjpEZXNjcmlwdGlvbj4K CiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0nJwogIHhtbG5zOnhtcD0naHR0cDovL25zLmFk b2JlLmNvbS94YXAvMS4wLyc+CiAgPHhtcDpDcmVhdG9yVG9vbD5DYW52YTwveG1wOkNyZWF0b3JU b29sPgogPC9yZGY6RGVzY3JpcHRpb24+CjwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tl dCBlbmQ9J3InPz6p9xD3AAAAAElFTkSuQmCC" transform="matrix(0.7499 0 0 0.7499 113 113)"> </image> </svg>

[Tom]

Hi there,

That depends on the SVG itself – the viewbox and overall width/height need to be adjusted when creating the SVG.

[Oscar]

Hi Tom, thanks for you response.
I tell you, the images are worked in PNG format in a size of 500px X 500px.
In order to use the tool (https://jakearchibald.github.io/svgomg/) I converted these PNG images to SVG (using Adobe Illustrator) and then I used the link generated, but the images are too small.
Do you think that the best way is to work from scratch the SVG images with a larger size?
In your experience, what is the right size to work with.

Thanks for your excellent help Tom.

[Elvin]

You can try resizing the <svg> through CSS instead of its attribute as SVGs automatically scales up or down anyway.

Say for example you have a markup of something like this:

<div class="gb-icon">
<svg> ... </svg>
</div>

You should be able to style the <svg> with something like this:

.gb-icon svg{
height: 2em;
width: 2em;
}

[Oscar]

Hi Elvin, thanks for you response.
I see that it is now possible to control the size of the icons from the panel (Excellent optimization).
I have managed to add the icons to the site, however I am having a problem with certain icons.
As you can see, in this page:https://brightled-3d9351.ingress-alpha.easywp.com/servicios/
Some icons are cropped. The SVG I used are correct and without cuts, the problem is at the time of placing them.
Could you check and help me finding the reason of this problem?

[Leo]

Did you download the icons from somewhere?

I actually talked to our designer Mike’s about using the icons.

His reply was “make sure to outline them though in illustrator or a vector program before adding the svg code to GB icons because icons are usually downloaded as strokes and not fills”

Hopefully this would help with your issue too.

[Author]

Posts