SVG Query

I Need Help
1

Trying to learn and playing around in Affinity Designer. Saved a file in svg format, which created an actual image.

The question is whether the svg file as an image can be used in the same way as a jpeg and still retain the virtues of an svg, or whether it is necessary to convert the image to code in order to benefit from the format.

Thanks.

2

Not sure by what you mean when you saw convert the image to code? SVGs are human readable (editable) code, where you can edit simple things like stroke colour and some sizing attributes etc.

SVGs are best used for simple drawings/icons and don’t require copies at multiple resolutions to look their best, compared to jogging etc.

The main challenge in working with SVGs is to control them or the container that they are in, to render the size you want to see on your design.

3

@pmjd Thanks for your response, but that’s not what my question was.

I create, say, a logo image in Affinity Design. I save it in svg format. It is saved as an image with a svg suffix.

Screenshot 2024-03-16 at 11.43.16 AM

My question is therefore whether I can use it in image form by adding it to an image bric and still retain the benefits of the svg format, or whether it is necessary to convert it to code and use the specific svg bric in order to retain the svg benefits.

4

I guess the obvious answer is to try, but if you add the svg to the asset manager, yes you can use it with an image bric without using code. I would suggest selecting the options for converting to curves and using hex colours when exporting from Affinity.

1 Like
5

That all depends on what you want to achieve.

1. Embedding SVG as an Image:

  • Simplicity: Just like any other image, you can add an SVG using the image container, which is straightforward.
  • Caching: Browsers can cache the SVG file, reducing loading times for subsequent page visits.
  • Isolation: The SVG is independent of your HTML, avoiding any potential conflicts with CSS or JavaScript in your main document.
  • Limited Interactivity: When embedded as an image, the SVG cannot be manipulated or styled with CSS and JavaScript to the same extent as inline SVG.

2. Inlining SVG Code:

  • Direct Manipulation: You can style and animate inline SVG elements with CSS and JavaScript, offering greater interactivity and flexibility.
  • DOM Access: Inline SVG becomes part of the DOM, which allows you to manipulate it more extensively, such as adding classes or changing attributes dynamically.
  • Performance: Inlining SVG can reduce the number of HTTP requests, which might improve page load times, especially if you have multiple small SVGs.
  • Increased Complexity: Your HTML document becomes longer and more complex, potentially making it harder to maintain, especially if the SVG code is verbose.

Which to Choose?

  • Use embedded SVG (with the <img> tag, CSS background-image, etc.) for simpler applications where you don’t need extensive interaction with the SVG elements.
  • Opt for inline SVG when you require dynamic interaction, such as animations, styling changes on user interaction, or complex visual effects that respond to user behaviour.

Ultimately, the choice depends on your specific needs regarding performance, maintainability, and interactivity.

There’s no need to convert anything to code just open the SVG with a text editor and all you need is there.

Small Potato Ltd - 000072

Use the code widget instead. Just my 2 cents of advice.

1 Like
6

Thank you so much, @Flashman and @Jerry.

7

One thing I would say is that I had a problem using an svg in the nav bar a while ago. It would suddenly preview at an enormous size (overflowing the screen), on both blocs preview and browser.
Changed to png, no problems.

8

I had something similar, but on the main page. Pretty sure it was a bug in custom class ordering that was fixed. There is no reason to be concerned generally about using svg.