- This topic has 3 replies, 3 voices, and was last updated 3 years, 9 months ago by
.
-
Posts
-
Hi there,
i tried to follow Leo’s Tutorial Video to add a custom svg – but couldnt get it to work.
I used an icon stock set we have from shutterstock – and saved the single icon as .svg using inkscape (as plain svg).
Then i opened it with chrome, copied the source code and pasted it into the page from the video.. There it is not shown – so even if i tried (unsuccessfull) to add it to a headline already here might be something wrong.I already did the same for a social media icon i got from fontawesome – same procedure – no problems. Only this time i wanted to use a custom svg.
Can you give me a hint what i am doing wrong? If i understood right svgs can be added that way.
The mentioned image is linked below.Customer Support
Hi there,
In this app: https://jakearchibald.github.io/svgomg/
Can you use the Open SVG option to upload the .svg file.
Then copy out the SVG HTML.i used that page – as it was linked in the video. it didnt work though.
The svg isnt shown when i paste the code into gb headline block-> icon -> Icon-SVG-HTMLSo what i did
1. opened shutterstock .eps with inkscape (containing icon collection)
2. selected 1 icon, added to new image, saved as plain .svg
3. opened with https://jakearchibald.github.io/svgomg/
4. clicked “copy as text”
5. added to headline block icon-svg-htmlNothing is shown then. If i download the image i can view it locally – but when i open it in a browser it says “This XML file does not appear to have any style information associated with it. The document tree is shown below.
” – opening in browser works before i open it with the app/link. But both version are only shown empty when added into the headline-block.Does the svg need a specific format? The image i used is linked in the first post.
Customer Support
Your SVG file includes a huge amount of empty space, the tool can’t help with that.
You’ll need to open it in Illustrator and export the selected paths.
Try this one:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.8 166.8"><defs><style>.cls-1,.cls-3{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.8px}.cls-1{stroke:#313b50}.cls-3{stroke:#243954}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M75.9 38.9c3 1 5 4 5 8 0 5-3 8-6 9-2 6-5 12-10 16l1 7a4 4 0 0 0 1 3h1l18 6m-60-49c-3 1-5 4-5 8 0 5 2 8 5 9a35.53 35.53 0 0 0 11 16l-1 7a4 4 0 0 1-2 3h-1l-17 6a9.08 9.08 0 0 0-7 3 21 21 0 0 0-7 12v43c0 10 8 19 18 19h104m-95-141c-4 5-3 15-3 15"/><path class="cls-1" d="m64.9 77.9-14 13-15-13m-7-54c0-11 9-18 18-19l14-3h0a4 4 0 0 1 1 4h0c5 1 9 0 14-2l-1 13c-2 3-4 6-7 7h-6l-13-3h-12"/><path d="m56.9 96.9 8 29-14 13-14-13 7-29 7 7 6-7" style="fill:#52b9d0"/><path class="cls-3" d="M77.9 122.9h86m-43-45v44m-43 0a43 43 0 0 1 86 0"/><path class="cls-3" d="M112.9 83.9c-7 7-15 18-15 38m32-38c7 7 14 18 14 38"/><path class="cls-3" d="M120.9 102.9c-23 0-30-12-30-12m60 0s-6 12-30 12m0 62v-43m43 0a43 43 0 0 1-86 0h0"/><path class="cls-3" d="M131.9 156.9c6-6 12-17 12-35m-33 35c-6-6-13-17-13-35"/><path class="cls-3" d="M150.9 152.9s-6-13-30-13m-30 13s7-13 30-13"/></g></g></svg>
- You must be logged in to reply to this topic.
