svg for web

[ghiesz]

Hello. i have the Affinity Suite brand new, and i will export an svg for web.

This export Dropdown i do not have in the newest Affinity Designer app for Mac Desktop.

Just have 4 Possibilities but none of them is working.

Do i have go back to Illustrator for this.

In the web there is nothing about.

Thank you for answers.

[GarryP]

Welcome to the forums.
I think the “(for web)” export options have been renamed as “(for digital)”.
If you are having problems with any of these then you will need to explain more about what those problems are rather than just saying that they are not working.
If you tell us what you have, what you are doing with it, what you want to happen, and what happens that is different to what you expect then someone will probably be able to advise.

[ghiesz]

Thank you for the quick response!

I will try to explain more detailed. Hope i get it

I tried to export via the digital option, but the icon will not be shown in the web.

If you have experiance with svg for web files you know that there in illustrator also have a special configuration.

This possibilities for configuration i don't find in AD.

When i look at the file in the html tree, its 0 x 0 in the size.

 

here are the settings which will work correct:

https://medium.com/@colinlord/how-to-export-svgs-for-the-web-from-illustrator-829bc1c841f6

[GarryP]

Unfortunately I don’t export SVGs very often and I don’t think I have ever done it for use in a web site so I am not the best person to answer the question.
However, I feel sure that someone else in the forum should be able to help.

[ghiesz]

Ok, thank you, i think i will contact the company, because i find it irritating, that there is no manual for that.

svg files for web are years old now, and developer have to know how this will work.

I am near to go back to illustrator. Spend now a lot of time in somethink i do with an manual in 1 minute.

[GarryP]

If you can wait until Monday, when more people – including Serif staff – will be logging in, you may get a good answer. (Some Sundays can be quiet for forum traffic.)

[R C-R]

11 hours ago, ghiesz said:

I tried to export via the digital option, but the icon will not be shown in the web.

What do you mean by "not be shown in the web"? Affinity should export an SVG file that you could use with appropriate HTML coding to appear on a web page, but it does not automatically do that for you.

[ghiesz]

I don't understand exactly what you will tell me.

I postet in my second post what i am doing with illustrator to get an web working svg file.

That is what i wanna get with AD!

The svg graphis should be displayed, but this is not working, and there is no manual for the correct workflow.

i found something where i have to open the exported file and have to do something but to be honest, that cannot be an solution, in illustrator i do this under 1 minute.

I will go over to work with AD instead of illustrator, so it should be working as them.

[R C-R]

1 hour ago, ghiesz said:

The svg graphis should be displayed, but this is not working

Displayed in what application?

[Heitor]

He's probably talking about displaying the SVG in a browser (into a html document, because he said it shows 0x0px computed in the html tree - hml inspector tools?-).

Anyway, I've exported to SVG from designer a lot and never had a problem so far.

ghiesz, take a look at the files I've attached. There is a svg file generated with Designer and a html file with 2 ways for displaying svg (<img> and <svg> tags). It would be nice if you could attach your svg so we could inspect what the problem is.

Greets.

(my taylor is rich)

svg.html car-lite.svg

[R C-R]

26 minutes ago, Heitor said:

He's probably talking about displaying the SVG in a browser ...

Maybe so, but I have exported various SVG files from AD & they open fine in Safari or any other browser installed on my Mac, as does your car-lite.svg file.

[ghiesz]

I am using svg in the web, mostly in TYPO3 and there for icons, logos, etc. 

I can see the car-lite-svg, but never created an svg like that.

As i wrote before, the way to create svg's over Illustrator is in the export preferences, but then it is very simple.

https://medium.com/@colinlord/how-to-export-svgs-for-the-web-from-illustrator-829bc1c841f6

Is there a way to do this with AD?

[Heitor]

File > Export

• In the dialog choose "SVG (for export)".
• Pay attention to what you are exporting (selection, whole document or artboard if it's the case) and select what you need.
• Hit export.
• Profit!.

Greets

[ghiesz]

Nope, this is not working, and i tried all of the posibilities.

As it seems AD cannot export svg as easy as Illustrator which is not easy understandable, because svg export is a standard for web.

AD has not the configuration to make this export.

The exported files are looking complete different.

 

[ghiesz]

This is how it looks like illustratorlike 

[ghiesz]

This is the export i get at its best by AD

[Heitor]

 

4 hours ago, ghiesz said:

This is how it looks like illustrator like 

So it exports fine but what you are talking about is which thing are you exporting (the objects or the whole artboard) and the display size in a browser (whether it is a svg alone or a svg in an html doc)

For starters there is one thing you have to take in account (AI or AD): the artboard size.
AI, as far as I know (I only have CSS 5.1) only lets you "save as" SVG the whole artboard. And it saves the SVG with the exact width and height in pixels and the exact position (of the artboard, nor the objects in it) with x and y.

Something similar to your design. It's a 800px x 600px document in AI:

And this is a SVG generated with AI of the whole 800 x 600 px artboard:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="800px" 
     height="600px" 
     viewBox="0 0 800 600" 
     enable-background="new 0 0 800 600" 
     xml:space="preserve">
  <rect x="12" y="12" width="156" height="156"/>
  <rect x="12" y="174" width="156" height="30"/>
  <rect x="12" y="210" width="48" height="30"/>
  <rect x="120" y="210" width="48" height="30"/>
  <rect x="66" y="210" width="48" height="30"/>
</svg>

AI exports (x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600") and it will be rendered in a browser with this exact size and position.

So if I want to export only the size of the elements you will have to resize the artboard accordingly:

But, what happens with Affinity Designer?

The same example (the 800 x 600 px artboard) exported with AD:

<?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">
<svg 
     width="100%" 
     height="100%" 
     viewBox="0 0 800 600" 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xml:space="preserve" 
     xmlns:serif="http://www.serif.com/" 
     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <rect x="12" y="12" width="156" height="156"/>
    <rect x="12" y="174" width="156" height="30"/>
    <rect x="12" y="210" width="48" height="30"/>
    <rect x="120" y="210" width="48" height="30"/>
    <rect x="66" y="210" width="48" height="30"/>
</svg>

AD exports svg with the correct viewbox values but note the width="100%" and height="100%" and no X/Y position (it means that it will resize the SVG as wide and tall of the browser viewport and the content proportionally). More on this, the browser, without x / y position will render the svg centered (at least in firefox and chrome):

If we compare the two SVGs side by side in an HTML doc we can see the Illustrator svg sticking to its sizes (800x600px) and the AD filling the entire right column proportionally.

I don't mind how AD exports, apart from the "standalone" declaration and those obscure style properties 🤔, in fact its more "responsive" behavior helps a lot when manipulating svg in html (better than AI imho).

But if you want to stick with how AI exports (meaning you want the exact size in px) then go with it. You always can manipulate the AD SVG changing the  width to 800px and height to 600px and add x and y values and, there you go, the same results .

Or...you can manipulate the sizes with CSS for the illustrator SVG to behave like the AD one:

.illustrator_svg {
  width: 100%;
  height: 100%;
  ]

Or hardcode the exact same sizes as the AI SVG for your AD css:

.designer_svg {
  width: 800px;
  height: 600px;
}

Greets

(I feel I've over-explained this somehow, sorry about this)

[MarcoMCM]

Ok, I get that there are more ways to Rome. But still how can I export a svg to web in the 1.8.3 version there is no export for web preset anymore. It is now probably "svg for export"? And then I get Ghiesz issue in Wordpress, when I upload the AD SVG it will not show me a size https://d.pr/i/WCiydx in attachmentsdetails but another SVG made by someone else is showing me this with thumb https://d.pr/i/S9lDte. But the main window of the media library shows the thumb https://d.pr/i/6DT7v8. Is there something to be done with the image before I can export the SVG in AD? Here I have the layers and image https://d.pr/i/BLYkdZ.

It is driving me crazy. It seems I am missing something here. Here are my steps to be sure:

1. Create an image (that has layers)
2. SVG (for export) https://d.pr/i/5ZS2Xo
3. Export
4. Import into Wordpress media library

I hope someone can see the problem. Here are the steps in an ani gif https://d.pr/i/yUQuKl

 

Cheers

[v_kyr]

When you create a new doc in AD etc. you either use a "new" template from the WEB category (SVGA, WSVGA, WXGA ... etc., or instead via own defined sizes and the orientation to use) or some other preset category. That choice or setup there is usually also the size then at which an SVG will be export here as whole doc. So a ...

• 1024 x 600 px doc at 72DPI is exported as those 1024 x 600 px then

When you export with NO checked "set viewbox option" setting (see the export "more" option button and the associated more options panel then) the exported/generated SVG code will not contain any viewbox settings, thus only setup width/height px values. Aka ...

• <svg width="1024px" height="600px" version="1.1" ...

... with the "set viewbox option" setting enabled, it will instead export/generate viewbox settings into the SVG code ...

• <svg width="100%" height="100%" viewBox="0 0 1024 600" version="1.1"

... if you alter the DPI setting on export, let's say from 72 DPI to 300 DPI, then it will export the initoal doc size of 1024 x 600 px then as 4267 x 2500 px (factor 4.2).

Generally after exporting an SVG file, one can also always open that SVG file inside any "text editor" and inspect the generated SVG code then (which is just plain text and sometimes also some additional base64 encoded bitmap data, as far as embedded image parts are used in an exported doc).

 

[MarcoMCM]

Hi v_kyr,

Thanks for your explanation. Other people that come here will benefit from this too!

[rgbforever]

Responding to OP:

Quote

When i look at the file in the html tree, its 0 x 0 in the size.

The same thing was happening to me. The problem was not Designer it was in the html.

I found that for an SVG to be seen in a web browser the img width and height need to be defined. In my case the export from Designer was fine, but I had mistakenly removed the height and width (in px) from the img tag. 🙄

Quick explanation at mozilla.