I have a few questions about the use of SVG in F3:
Where do you get the SVGs from? From the Bootstrap page or from other sources? What are some good sources?
Is it correct to simply copy the whole HTML code “svg xmlns…” e.g. from the bootstrap page into the SVG container? Or is there something to consider here?
Doesn’t the use of SVG unnecessarily bloat the code of the page or does it have no influence?
Is there anyone else here? No clues?
Hi Matthias,
I started implementing SVG early on in various web projects. I think it was BWD who were the first to provide a functional tool for it. Coming from Freehand/Illustrator as a designer, it was the most perfect way to integrate word/image marks without loss of quality. But the preliminary work always seemed too tedious to me. Copying out snippets of code and the sometimes bloated volume of complex graphics was not my thing. I haven’t made any empirical comparisons, but my workflow today is limited to creating SVGs and using the Image:Remote Stack in F3. No more thoughts about any optimization. Whether here or on the rw4all forum I have also read that the use of png’s would ultimately be advantageous in terms of file size. Of course, it also depends on the color range and the complexity of the object. So far from me. Greetings to Switzerland.
Helau und Alaaf;-)
Hi Roger,
You are right. Using the Image:Remote Stack seems to me to be the better choice for using SVG’s than the SVG stack. I didn’t even have it on my radar.
I can’t imagine that using a PNG is the better choice, as it doesn’t really have a smaller file size than SVG. It is also limited in its display options compared to SVG. But never mind, the only issue in this case is the use of SVG.
Thank you very much for your detailed answer and greetings back to the Rheinland, if i understand your alaaf correctly 
Hi,
I start always hier: <svg width=“100%” height=“100%” viewBox="0 0 5600 …
I delete this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
I do the graphics myself using Affinity Designer 2; however, it took me quite some time. The last graphic I did is the small map on the top of my website www.tofi-outdoorladen.de. I did not convert the name of the towns into curves the town names are still text. I think even google can read the name of the towns (SEO).
I love using SVG’s!!
There are a couple really good apps your can use to manage your SVG’s.
I use SVGs a lot, animated SVGs mainly, I always convert text to curves to ensure that sizing and font type are displayed exactly as I want them, not always, but sometimes type can get jumbled up with animated SVGs or wrong font displayed due to user settings. Instead I put the metadata for SEO in the SVG code, open the SVG in Textedit then add the code in there. There are a range of different tags you can use (W3C a good place to look) or doing a Google search such as description, title, ARIA etc.
Thought I should add also, I always use the SVG tool, I open the SVG in Textedit and just copy the entire SVG code from there and paste in to the SVG Tool. Never had a problem doing that and everything works as expected. I really love the SVG tool in Foundry.
Yes I forgot. Leaving text as text only works with fonts installed on all devices like Arial, Helvetica …
Where do I find the SVG tool that I would drop into textedit and copy the code from?
It’s not using a tool that you drop in to Textedit. You create (or obtain your SVG), right click on the SVG in Finder and choose to open with Textedit. You then have the SVG code that you can copy to the clipboard. Now you can add the Foundry SVG tool to your website layout, double click the SVG tool to edit and paste your SVG code in there.
