SVG stack challenges

I’m having trouble getting an SVG image into the SVG stack.
I have the DooBox SVG stack which is pretty straight forward. In the Inspector you just put in its location and the stack pulls it in.
With the doobox stack, opening the HTML and editing it to the location doesn’t work. Putting in img src = “https://www.squeegeegraphics.com/SGArtWarehouse/SqueegeeGraphics.svg” alt=“SqueegeeGraphics.svg” gets the image to load, but that would defeat the purpose of using the svg, wouldn’t it?

The instructions give a lot of detail about the settings, but mention nothing about the need to open the stack to edit the html or the proper format for the html.

I did the recent update, so I don’t know if this is a bug or operator error/inexperience. The documentation could use a little bit more explanation though. I can get around it with my doobox stack, but thought it should be mentioned. Thx.

Not sure I’m understanding your problem here. Can you detail the problem you’re having or better yet provide a short screen recording to showcase the probelm?

The problem generically is that I can’t replace the anvil with the desired logo.

I can replace it by using img src= html. Is that what is expected for the user?

Inserting the wanted image address for the existing image address doesn’t work. I’m not sure what all that other code that follows does.

This is the code that’s there with the location inserted

svg xmlns=‘https://www.squeegeegraphics.com/SGArtWarehouse/SqueegeeGraphics.svg’ viewBox=‘0 0 512 512’>…path d=‘M363.41,0H148.59A148.6,148.6,0,0,0,0,148.59V363.41A148.6,148.6,0,0,0,148.59,512H363.41A148.6,148.6,0,0,0,512,363.41V148.59A148.6,148.6,0,0,0,363.41,0ZM477.68,174c-1,1.85-2.64,2.49-4.75,2.66-24.28,2-48.22,5.94-71.52,13.21-17.06,5.33-33.42,12.2-47.72,23.2-13.07,10.06-22.53,22.53-25.32,39.22-1.28,7.67-1.53,15.36.32,23,2.23,9.18,7.58,16.28,14.84,22.1,7.69,6.15,16.4,10.53,25.42,14.32a18.59,18.59,0,0,1,8.39,6.73c5.41,7.74,11,15.4,16.54,23a15.37,15.37,0,0,1,3,9.38c0,8.13,0,16.26,0,24.39,0,4.31-1.2,5.49-5.38,5.49-16.69,0-33.38,0-50.07,0-2.71,0-4.22-1-5.51-3.35-13.15-23.78-33.38-36.18-60.57-36.21s-47.63,12.42-60.8,36.33c-1.24,2.25-2.69,3.23-5.27,3.22-16.9-.08-33.79,0-50.68,0-3.57,0-4.86-1.17-4.89-4.7-.06-8.74-.22-17.49.12-26.22a15.94,15.94,0,0,1,2.7-7.87c5.64-8.32,11.5-16.52,17.62-24.5a19.27,19.27,0,0,1,7.09-5.42c8.79-4,17.51-8.15,25.18-14.15,8.92-7,14.87-15.71,16.28-27.22a27.83,27.83,0,0,0-27.08-31.23c-6.21-.09-12.42-.07-18.62,0a7.64,7.64,0,0,1-6.9-3.7,3.74,3.74,0,0,0-2.83-1.39c-52.79,3.14-94.92-18.3-130-56.13-3.23-3.48-3.82-6.82-2.06-10.27A6.69,6.69,0,0,1,41,164c1.22-.08,2.44-.08,3.66-.08q60.61,0,121.21,0c2.07,0,3.38-.35,4.64-2.37a8.45,8.45,0,0,1,5.09-3.26c4.84-1,7-3.23,7.17-8.21.07-2.21,0-4.6.81-6.55.72-1.7,2.64-2.89,4-4.31h290Z’/>…/svg

Right click your SVG and choose open in Text Edit. This will show your SVG source code. Copy this source code to clipboard. Double click the Anvil logo on the SVG tool you have placed in your page (Edit Mode). This will reveal the source code for the anvil. Select all the source code for the Anvil, delete this and replace with the pasted code of your own SVG and there you have it. You don’t need to link to a saved SVG. Works with all SVGs, ones with CSS animations in them also, so long as all SVG code is pasted in to the SVG tool.

2 Likes

Also thought I should mention, if copying and pasting your own SVG code, it can be a bit of a handy tip to only copy from the lines starting from <svg…and the rest of the code following from here

The reason I say this is, depending on the software you have used to create your SVG, usually you may have one or two lines included at the start of the code for example starting <?xml… and <!DOCTYPE… these two lines can cause problems, not always but can, so just get rid of those one or two lines and only copy and paste your SVG code from where it starts <svg…

3 Likes

Badda Bing! Those instructions should definitely be in the documentation.

That is much easier than warehousing the images, too!