Jump to content
You must now use your email address to sign in [click for more info] ×

Creating an SVG logo in AD to insert into an area with dimensions.


Recommended Posts

Hi everyone, I'm a newbie in AD. And therefore, I apologize in advance if this topic has already been raised. And so the task. On the site in the header, there is a place for the SVG logo. This is approximately 120x60 px. I am not interested in drawing the logo itself, but rather in the correct actions for creating and exporting.

Here are the questions:

1. When creating a new document, what size should it be?

2. Should the document have a background?

3. Mounting area, if it is needed for export, what size should it be?

4. When exporting to SVG, what should be selected (artboard, if there is one, selection, document)?

5. When exporting to SVG, which option should I choose specifically (there are 4 positions there)?

6. What specific dimensions do I need for correct and adaptive scaling of width, height, viewbox, if you plan to insert this code into the header area of the site 120x60 px?

Link to comment
Share on other sites

1. Twice as wide as it is tall.

2. Up to you, can be easily toggled afterwards if you change your mind.

3. Not sure what you mean.

4. Document.

5. I forgot the exact names, just want one that doesn't rasterise the document, and has the 'set viewbox' and 'flatten transforms' ticked.

6. There are lots of ways to put SVG into a web page, and lots of ways to control it's appearance.

 

Link to comment
Share on other sites

1. If I understood correctly, is it possible, for example, to make a document with a size of 240x120px, for proper scaling when pasting already on the site, so that the 120x60 area has the correct aspect ratio? Then, when exporting to SVG, select "document", right?

2. So I'm a beginner, I don't quite understand, when exporting to SVG, does the background or the substrate fall into the document itself, or are only shapes, curves and everything that is drawn exported?

3. Here I mean, if you create a logo, for example, in a mounting area of the desired size, for example 240x120, in order to export to SVG, choosing the "mounting area" for the exhibition, will it be correct?

4. This is understandable, thank you.

5. Here I did not understand where such settings are?

6. The code will be inserted directly <svg width="100%" height="100%" viewBox="0 0 800 600" version="1.1">............</svg>
Therefore, the question is, if the site area is 120x60, is it necessary to specify the width, height, viewBox parameters in the code? And if so, what should they be?

Link to comment
Share on other sites

  1. You can make that in ADe exactly w = 120 px, h = 60 px, by let's say 96 PPI/DPI (since it's for a website and thus will be displayed on monitors). - Or as BofG suggests make it "(120x60) px * factor, where factor >= 1 huger then", in order to keep the initial aspect ratio on export.
  2. Depends on a) the logo itself, since some logos might have their own different background colors and b) of the header area, aka if that has to keep a/it's specific background color or not.
  3. That should be dependent on your logo's size (w x h) itself and how it should fit into the 120x60 px header area. Aka if the logo is created the same 120x60 px size and thus occupies the whole header space, or if the logo has smaller dimensions than the header area but will be placed to fit centered into a portion of that header area.
  4. Depends on the artboard/document, or all the selected layer portions of the logo here. There are several ways to export, aka with document boundaries or not.
  5. a) SVG (for export)
    b) Raster DPI:  96 (Nothing will be rasterized) <-- check the rasterization then
    c) Whole document
    d) there are more SVG export options under the "More" button!
  6. In case the document is created with width= 120 px & height 60 px then ...

    <svg width="100%" height="100%" viewBox="0 0 120 60" version="1.1">............</svg>
        ... or even better ...
    <svg width="120" height="60" viewBox="0 0 120 60" version="1.1">

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

I tried many options and chose the most acceptable ones so far.

1. Create a document for the WEB (set DPI 96) of any size (the document will be in pixels), then create a rectangular area of the desired size, for example 120x60 pixels, draw the necessary content in it, for example a logo, remove the rectangle fill and stroke as desired, select all objects and export as a "selection area" or as "selection only" and as SVG(for export). We get <svg width="100%" height="100%" viewBox="0 0 120 60". We change <svg width="100%" height="100%" to <svg width="120" height="60" or the desired dimensions, I assume that this is for older browsers.

2. Create a document for the WEB (set DPI 96) of the desired size, drive in the dimensions ourselves (the document will be in pixels), draw the desired content, for example a logo, and export as a document and as SVG(for export). We get <svg width="100%" height="100%" viewBox="0 0 120 60". We change <svg width="100%" height="100%" to <svg width="120" height="60" or the desired sizes, I assume that this is for all or old browsers. 

--Questions on these points:

a) Is there any difference to group all objects or not to group before exporting, I noticed that if you open an already exported file, then both of them are editable, if necessary.

b) When creating a document or exporting, the DPI is set, but the logo itself is purely vector, is this how I understood the possibility of displaying in pixel monitor mode or not? How can I view and check the exported file, what is its DPI?

3. I also tried the option with a coefficient of x2, create a 240x120 area for proper scaling and export SVG (for export) and get
<svg width="100%" height="100%" viewBox="0 0 240 120" when inserted on the site, the logo is placed correctly, when zooming and adaptability behaves correctly,
if I change to <svg width="120" height="60", then there are no changes, it works correct. But the question is whether <svg width="120" height="60" viewBox="0 0 240 120" is correct for all or old browsers?

4. Tried and save SVG(flatten). Saved as a selection area of 120x60 (having previously selected all objects) and got
<svg width="100%" height="100%" viewBox="0 0 120 60" when inserted on the website, the logo is placed correctly, when zooming and adaptability behaves correctly, if I change to <svg width="120" height="60", then there are no changes, it works correct.
Although when opened to full screen, the logo looks blurry and not clear.

--As I understand it, the save mode is needed if the project has both vector and raster objects, or am I wrong?

5. I tried in all other modes SVG (digital small size), SVG (digital high quality) both to save the document and selection modes.
If you export an entire document, then the viewBox="0 0 1440 810" or viewBox="0 0 6000 3375" change in size and the logo itself is scaled into a small image.
If you export as a selection, then the dimensions also change viewBox="0 0 90 45" or viewBox="0 0 375 188", although in this case, when inserting the logo on the site, it scaled and occupied the entire 120x60 area allocated to it, with adaptability it behaves correctly. But the question is is it correct for all or old browsers?

Although I have not tried to create artboards of the right size and export, but something tells me that this will be the same as when exporting the entire page of the right size. Therefore, I have chosen options 1 and 2 for myself so far. Maybe this information will be useful to someone.

Link to comment
Share on other sites

7 hours ago, kosh said:

--Questions on these points:

a) Is there any difference to group all objects or not to group before exporting, I noticed that if you open an already exported file, then both of them are editable, if necessary.

b) When creating a document or exporting, the DPI is set, but the logo itself is purely vector, is this how I understood the possibility of displaying in pixel monitor mode or not? How can I view and check the exported file, what is its DPI?

a) Look into the generated SVG code with an text editor for any differences in the way the SVG code has been created/exported (a textual editor with an build-in diff tool will show you better for huge SVG files). - Other than the way the SVG code is generated (groups or no groups), there shouldn't at least be any visual difference when previewing the SVG file in any of the common webbrowsers, or SVG capable tools (like for example: FF, Chrome, Inkscape, MacOS Preview, GC, ... etc.).

b) There is inside the generated SVG code no direct SVG based setting/indicated parameter for it (since that's usually not needed for vector graphics). The DPI setting is more used for raster/bitmap images here internally by apps which allow to showup/preview SVG files. - Other apps like for example Illustrator + Inkscape + the CSS standard are using as default 96dpi here! 

In Affinity when exporting (see the online help) it can be altered ...

Quote

Use DPI

Overrides the current project's resolution setting for the export. The exported image's DPI is set using the adjacent input box

 

7 hours ago, kosh said:

--As I understand it, the save mode is needed if the project has both vector and raster objects, or am I wrong?

 

Quote

 

Settings unique to SVG format

 

Show descriptions: All / None

Export text as curves

When selected, the text in the resulting file will be drawn as curves (therefore displaying precisely as intended, even if viewed on a device without the used fonts installed). However, this option will increase file size, and text won't be editable as text or available to "text to speech" in other apps. If this option is off, text will be exported as text and the viewing device will need the used fonts installed for it to be viewed correctly.
 

Longer text spans

When selected, text is placed relative to previous lines of text (therefore producing smaller file sizes and simpler file structures). If this option is off, text is placed with absolute coordinates
 

Use hex colours

When selected, colours in the exported file are expressed as RGB Hex values (therefore reducing file size but less human-readable). If this option is off, colours are exported as standard RGB values.
 

Flatten transforms

When selected, transformed objects are 'fixed' in the exported file. This allows for the file to be viewed more accurately across applications. If this option is off, objects remain dynamically transformed to allow for more flexible editing.
 

Use tile patterns

When selected, rasterised areas may be converted to a vector shape with a filled bitmap to give smoother, sharper edges. However, this might not be supported by some apps. If this option is off, objects will exist as singular elements within the exported file.
 

Set viewBox

When selected, the exported file includes coordinates and dimensions which define the view box of the image. If this option is off, no view box data is included in the exported file. The export area is used to define the view box.
 

Add line breaks

When selected, the code in the exported file will be optimized for human viewing and reading. If this option is off, the image will be exported with code on a single line which will make the file size significantly smaller.

 

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Thank you so much for the detailed explanation.

a) Yes, I understood that, there is no special difference.

b) This is also understandable, it's just a built-in setting for displaying/printing/as a vector image, which is used for displaying in a browser/ other program/printer, etc. But I would like to check the file that has already been exported for this DPI setting. For example, JPG can be viewed file properties in Windows and it can be seen. Are there no online services or programs to see this?

Link to comment
Share on other sites

1 hour ago, kosh said:

I would like to check the file that has already been exported for this DPI setting

There's no such thing, if your SVG contains raster elements they will have a pixel density but it's way more complicated than just a "DPI setting" as there are lots of different scaling controls and unit settings within the SVG format.

If you don't have any raster elements, then there's no pixel density involved at all.

Link to comment
Share on other sites

3 hours ago, BofG said:

There's no such thing, if your SVG contains raster elements they will have a pixel density but it's way more complicated than just a "DPI setting" as there are lots of different scaling controls and unit settings within the SVG format.

If you don't have any raster elements, then there's no pixel density involved at all.

Well, then why choose the DPI parameter in the document properties when creating or exporting, if there will be no bitmaps in the project, but only a vector?

Link to comment
Share on other sites

1 hour ago, kosh said:

Well, then why choose the DPI parameter in the document properties when creating or exporting, if there will be no bitmaps in the project, but only a vector?

Because you can add effects in Affinity that have to be rasterised on output. They will be rasterised at the pixel density that the document is set to.

Link to comment
Share on other sites

7 minutes ago, BofG said:

Because you can add effects in Affinity that have to be rasterised on output. They will be rasterised at the pixel density that the document is set to.

Now I understand, thank you for the explanation.

Link to comment
Share on other sites

1 hour ago, kosh said:

if an artboard is being created, how can you understand with what DPI it is being created and how this parameter can be changed?

Answer:

1 hour ago, kosh said:

When creating a document, you can select the DPI

... in the "Document Setup...".

 

macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1

Link to comment
Share on other sites

23 minutes ago, kosh said:

And when the mounting area is created, where to choose the DPI settings?

23 minutes ago, kosh said:
 

Answer:

... in the "Document Setup...".

Every document has one DPI setting. It is the same for all artboards.

macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1

Link to comment
Share on other sites

5 minutes ago, kosh said:

And if I understand correctly, then when importing the mounting area, the DPI parameter can be changed at your discretion, right?

Not sure what you mean with "importing the mounting area". – However, what could happen if you just give it a try, with the chance of a positive, sustainable experience, possibly even terminating doubts and ambiguity along the way?

macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1

Link to comment
Share on other sites

3 hours ago, thomaso said:

Not sure what you mean with "importing the mounting area". – However, what could happen if you just give it a try, with the chance of a positive, sustainable experience, possibly even terminating doubts and ambiguity along the way?

Well, look, we create a document and select DPI, when we import the entire document, it is imported with this DPI, and when importing, we can additionally select DPI. If we create a mounting area of the desired size, and then import, in the import settings, select "mounting area", with what DPI is the import, how do I find out?

Link to comment
Share on other sites

17 minutes ago, kosh said:

... and when importing, we can additionally select DPI. ...

Where and how are you able to select DPI when Placing (the term for importing a file used in the Affinity suite of applications) a document/file/image?

There is an item on the Context Toolbar that may help you. You need to use the Select tool (the black arrow) and choose the image/picture to see this in the Context Toolbar. Otherwise use the Resource Manager to see the information about the Placed images.

1937510914_ScreenShot2022-08-08at9_34_26AM.png.7c8b3ba4969ce51f827e3cffeaf6afca.png

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.0 | Affinity Photo 2.4.0 | Affinity Publisher 2.4.0 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

1 hour ago, Old Bruce said:

Where and how are you able to select DPI when Placing (the term for importing a file used in the Affinity suite of applications) a document/file/image?

There is an item on the Context Toolbar that may help you. You need to use the Select tool (the black arrow) and choose the image/picture to see this in the Context Toolbar. Otherwise use the Resource Manager to see the information about the Placed images.

1937510914_ScreenShot2022-08-08at9_34_26AM.png.7c8b3ba4969ce51f827e3cffeaf6afca.png

Thanks for the answer, I know that, but the question is different

Quote

If we create a mounting area of the desired size, and then import, in the import settings, select "mounting area", with what DPI is the import, how do I find out?

 

Link to comment
Share on other sites

21 hours ago, kosh said:

Well, look, we create a document and select DPI, when we import the entire document, it is imported with this DPI, and when importing, we can additionally select DPI. If we create a mounting area of the desired size, and then import, in the import settings, select "mounting area", with what DPI is the import, how do I find out?

No, I doubt we can, not when importing.

DPI (resolution) & dimensions (size) are always related and depending on each other. If you 'import' a resource in an Affinity document by click-place then it gets placed in an auto-size which makes it have the same DPI as the document it got placed in and Affinity calls this auto-size "100 %" and "Original Size".

Try this: create two documents of same page size but different DPI, e.g. 100 and 300 DPI. Then click-place two resources in both of these documents, e.g. a lowres screenshot + a highres photo. Each of them will get placed in a different sizes in both documents. To inspect & set these resource's resolution and percentage size follow @Old Bruce's hint.

macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1

Link to comment
Share on other sites

21 hours ago, kosh said:

Well, look, we create a document and select DPI, when we import the entire document, it is imported with this DPI, and when importing, we can additionally select DPI. If we create a mounting area of the desired size, and then import, in the import settings, select "mounting area", with what DPI is the import, how do I find out?

I am not clear about what you mean by "mounting area" or how/where you would select it. Can you explain a bit more about that?

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

2 hours ago, R C-R said:

I am not clear about what you mean by "mounting area" or how/where you would select it. Can you explain a bit more about that?

Insert the artboard, click on the button "mounting area" and select "document" and the artboard will take up the entire document. If there are objects in the document, select them, click on the "mounting area" button again, but select "selection" and the mounting area will be created, which can then be exported separately.

 

1.jpg.608597f241380a228ecd34a7dc3d5d1d.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.