Is there any difference in using SVG instead of PNG?

Question

I mean, SVG seems to be automatically converted to pixel in Godot. Can I just skip converting it to PNG? Is there any difference performance-wise?

Comments

Tl;dr

...................................
Using Godot :

right now you cannot skip converting to PNG.
Godot only supports converting SVG --> image,
but not dynamically working with SVG.

Logistically difficult to implement
+ get working with custom shaders
+ only specialized GPUs seem to support crunching SVG

...................................
Using other tools :

Performance wise (if you ever need to know for other tools /web design)
using SVG for small files/pictures is a fine alternative to PNG.
For 10,000's of objects of SVG --> performance plummets.

SVG can be optimized by declaring to reuse data shapes / minimize bloat.

 

 

Thanks for the cool question
& have a wonderful day!

~ G r a s s H 0 P E r ~

Answer 1

Neat question!

 

TLDR :

Looking at the Godot 3.0 GitHub...
Godot can import SVG files --> convert to pixel image assets
but cannot use SVG files in games (not 2D)(not 3D)

.........................................................................

 

== Current SVG import support in Godot 3.0 ==

 

===== Added feature ======

Code was added in 2017 August
to --import-- SVG files --> convert them to images.

Has the benefit of being able to scale + render vector graphics
--> into raster (pixel) assets

Useful for using one file to quickly generate
+ support specific resolutions

djrm commented on Aug 18 [2017]
    svg import support

    icons now are rendered directly from svg
    (this solves graphics issues on MidDPI and VeryLoDPI)
    added dark versions of the icons
    that can be used on light themes.

========== Use ===========

So you can click on an SVG in your file tree, click Import tab,
change settings / change the amount to scale the SVG.

But when you drag that SVG asset to (example) your 2D scene view
that SVG

1. is rendered to an image (scaled by your import value),
2. then placed inside your scene.

At this time,
Finished + Exported Games made using Godot 3.0
cannot use/dynamically create/render SVG files.

 

(maaaaaybe SVG support could be added
using GDNative to import libraries... but I didn't research that)

 

===== Why? ======

From "Will godot 3 support svg textures ( vector art ) ?" :
"This is very unlikely. GPUs do not have hardware support for sampling vector graphics like they do for raster. This is not a trivial task, and might cause some significant performance hits and other unfortunate complications (such as making custom shaders not work or difficult to make work).
Just rasterize your SVGs by exporting to png or some other raster format. Trust me, it's better this way."
-- jrkirby

 

 

As graphics cards evolve,
SVG use in-game might someday be implemented in Godot.

But when?
Who knows :)

 

 

===== Future Godot plans... ======

2D games with meshes
without using viewports :

• "it's planned to have mesh functionality in 2D for future versions." -- Zylann
• "2D mesh support which allows rendering 3D meshes in a 2D world without using viewports." -- Calinou
• ---> Support vector images #4826
  https://github.com/godotengine/godot/issues/4826

tentatively planned for Godot 3.1

 

 

@@@@@@@@@@@@@@@@@@@@@@@@

 

to answer the second part of your question...

=== SVG performance info in general ===

 

==== Compatibility ====

It seems like SVG works across all of

• desktops,
• Android
• iOS
• HTML

So no compatibility issues on the platforms.

 

 

But feasibility for use in games
seems more complicated than you'd expect.

==== Performance ====

SVG
-- pros --

• Can be changed or created at runtime
• Scales without pixelation
• For small or reasonably sized images,
  seems like there are no drawbacks opposed to png

SVG
-- cons --

To display a SVG image : its objects are stored in memory

      for very large SVG drawings ( in the 1,000s or 10,000s of objects )
      you might run into the following issues :

• could be an issue for mobile + older computers
  when using 100s (?) or 1,000s+ objects
   
• If animating a huge SVG --> can lead to performance plummeting
  from first link below -- 2012
   
• Loading very large SVG files will take much longer
  "Why is SVG so slow!" -- 2013

 

 

====== further reading ======

"I have an SVG drawing with 10138 parts, so it runs slowly."

• https://stackoverflow.com/questions/11639211/need-to-speed-up-my-svg-could-i-convert-to-webgl-or-canvas

"Performance of vector graphics versus bitmap or raster graphics?"

• https://computergraphics.stackexchange.com/questions/3/performance-of-vector-graphics-versus-bitmap-or-raster-graphics

 

Vector vs. Raster: What Do I Use?

• https://designshack.net/articles/layouts/vector-vs-raster-what-do-i-use/

 

High Performance SVGs     (#how2)

• https://css-tricks.com/high-performance-svgs/

Is Using SVG Images Good for Your Website’s Performance?

• https://www.sitepoint.com/svg-good-for-website-performance/

(huge tutorial)
SVG AND CANVAS GRAPHICS IN ANGULAR 2

• https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#svg-graphics