Difference between revisions of "SVG File Format Tips"

From Pikes Peak Makerspace Wiki
Jump to navigation Jump to search
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
'''SVG stands for Scalable Vector Graphics,''' a document format to reproduce 2D graphics.
 
'''SVG stands for Scalable Vector Graphics,''' a document format to reproduce 2D graphics.
  
−
Scalable means the graphics can be made larger without loss of quality. This is not true with raster graphics.
+
Scalable means the graphics can be made larger without loss of quality. (This is not always true with raster graphics.)
  
 
Additionally, storage space needed for SVG files is usually less than raster files.
 
Additionally, storage space needed for SVG files is usually less than raster files.
  
−
SVG's are usually created in "drawing" software such as Inkscape or Adobe Illustrator.  
+
SVG files are usually created in "drawing" software such as Inkscape or Adobe Illustrator.  
  
 
However, SVG files can even be generated manually or programmatically.
 
However, SVG files can even be generated manually or programmatically.
  
−
SVG's can also be interactive or animated.
+
SVG files can also be interactive and/or animated, and it can contain metadata.
 +
 
 +
(an SVGZ file is a compressed SVG file.)
 
<br>
 
<br>
 
<br>
 
<br>
Line 16: Line 18:
 
<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> &nbsp; </p>
 
<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> &nbsp; </p>
 
<br>
 
<br>
 +
[[File:Burst.png|alt=burst of white rays on orange background|link=https://wiki.pikespeakmakerspace.org/index.php/About_PPM|right|frameless|250x250px]]
 +
 
==Tips ==
 
==Tips ==
−
*'''Preview SVGs ('''with software at PPM):
+
*'''Preview SVG files ('''with software at PPM):
 
::Brave, Google Chrome, Microsoft Edge, and Mozilla Firefox (web browsers)
 
::Brave, Google Chrome, Microsoft Edge, and Mozilla Firefox (web browsers)
 
::Adobe Bridge (digital asset browser)
 
::Adobe Bridge (digital asset browser)
−
*O'''pen SVGs''' (with software at PPM):
+
*'''Open SVG files''' (with software at PPM):
 
::Inkscape, Adobe Illustrator, VCarve, LightBurn
 
::Inkscape, Adobe Illustrator, VCarve, LightBurn
−
*'''Import SVGs''' (with software at PPM):
+
*'''Import SVG files''' (with software at PPM):
 
::Inkscape, VCarve, Blender
 
::Inkscape, VCarve, Blender
 
::'''[https://reference.wolfram.com/language/ref/format/SVG.html Mathematica]''' — [https://reference.wolfram.com/language/ref/Import.html Import] the SVG file format
 
::'''[https://reference.wolfram.com/language/ref/format/SVG.html Mathematica]''' — [https://reference.wolfram.com/language/ref/Import.html Import] the SVG file format
−
*'''Paste SVGs into files''' (with software at PPM):
+
*'''Paste SVG files into files''' (with software at PPM):
 
::Adobe Illustrator
 
::Adobe Illustrator
−
*'''Save (Save As, Export) SVG''' (with software at PPM):
+
*'''Rasterize SVG files''' (with software at PPPM):
−
::Canva
+
:: Adobe Photoshop
 +
*'''Save (Save As, Export) SVG files''' (with software at PPM):
 
::Inkscape (The native file format of Inkscape is .svg)
 
::Inkscape (The native file format of Inkscape is .svg)
 
::Adobe Illustrator
 
::Adobe Illustrator
 +
::Canva
 
::CorelDRAW
 
::CorelDRAW
  
 
::'''[https://reference.wolfram.com/language/ref/format/SVG.html Mathematica]''' — [https://reference.wolfram.com/language/ref/Export.html Export] static SVG files
 
::'''[https://reference.wolfram.com/language/ref/format/SVG.html Mathematica]''' — [https://reference.wolfram.com/language/ref/Export.html Export] static SVG files
−
::Additionally, [https://www.openstreetmap.org '''OpenStreetMap'''] can save images as SVG
+
::Additionally, [https://www.openstreetmap.org '''OpenStreetMap'''] can save images in SVG format
 
*'''Live code in SVG''' (with software at PPM):
 
*'''Live code in SVG''' (with software at PPM):
−
:with Visual Studio Code and the third party extension "SVG"
+
::Visual Studio Code and the third party extension "SVG"
 +
 
 +
 
 +
==External Training==
 +
'''Links to external sites:'''
 +
 
 +
:'''[https://developer.mozilla.org/en-US/docs/Web/SVG Getting Started with SVG]''' — at mdn web docs
 +
:'''[https://support.shapertools.com/hc/en-us/articles/115002735274-SVG-Files-Basics SVG Files Basics]''' — at Shaper Tools
 +
:[[commons:Help:SVG|'''Help:SVG''']] — at Wikimedia Commons
  
−
== Classes ==
+
:'''[https://codepen.io/ CodePen]''' — build, test, and discover front-end code
−
PPM announces its [https://www.meetup.com/pikespeakmakerspace/events '''Upcoming events, including classes, on Meetup''']
 
  
−
== Training ==
+
==SVG Animations==
 
'''Links to external sites:'''
 
'''Links to external sites:'''
 +
:[https://www.youtube.com/watch?v=4laPOtTRteI '''SVG can do THAT?!'''] — by '''[https://sarah.dev/ Sarah Drasner]'''
 +
:'''[https://www.w3schools.com/graphics/svg_animation.asp SVG Animation]''' — at '''[https://www.w3schools.com/ W3Schools]'''
 +
 +
==SVG Marketplace ==
 +
Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the community.
 +
<br>
 +
(Use our #job-board channel if you want to hire somebody to create a file, for&nbsp;example.)
  
−
===[[wikipedia:SVG|SVG]] — on Wikipedia ===
+
'''Links to external sites:'''
−
===[[commons:Help:SVG|Help:SVG]] — at Wikimedia Commons ===
+
:'''[https://hub.shapertools.com/search?search=svg svg files at Shaper|Hub]'''
 +
:'''[https://svgwave.in/?ref=uigoodies.com Generate SVG Waves]'''
  
−
== Related Pages ==
+
==Hand-Curated Links==
 +
'''Links to member-recommended external sites:'''
 +
:'''[https://svgnest.com/ SVGnest]''' — arrange parts to use as little material as possible
 +
:'''[https://www.openstreetmap.org/about OpenStreetMap]''' — the free wiki world map.
 +
 
 +
==Additional Help==
 
'''Links to related PPM Wiki pages:'''
 
'''Links to related PPM Wiki pages:'''
 +
 
:'''[[Inkscape Tips]]'''
 
:'''[[Inkscape Tips]]'''
 
:'''[[Adobe Illustrator Tips]]'''
 
:'''[[Adobe Illustrator Tips]]'''
Line 54: Line 81:
 
:'''[[Visual Studio Code Tips]]'''
 
:'''[[Visual Studio Code Tips]]'''
 
:'''[[Canva Tips]]'''
 
:'''[[Canva Tips]]'''
 +
:'''[[CorelDRAW X6 Tips]]'''
 
:'''[[Blender Tips]]'''
 
:'''[[Blender Tips]]'''
 +
:'''[[File Format Tips]]'''
  
 
:[[Computers|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers — Windows'''&nbsp;&nbsp;</span>]]
 
:[[Computers|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers — Windows'''&nbsp;&nbsp;</span>]]
−
:[[Computers -- Mac and Apple|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers — Mac and Apple'''&nbsp;&nbsp;</span>]]
 
  
−
==Hand-Curated Links==
+
:[[Computers — Mac and Apple|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers — Mac and Apple'''&nbsp;&nbsp;</span>]]
−
'''Links to member-recommended external sites:'''
+
 
−
:'''[https://svgnest.com/ SVGnest]''' — arrange parts to use as little material as possible
+
:[[Computers — Ubuntu|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers — Ubuntu'''&nbsp;&nbsp;</span>]]
−
:'''[https://developer.mozilla.org/en-US/docs/Web/SVG Getting Started with SVG]''' — at mdn web docs
 
−
:'''[https://support.shapertools.com/hc/en-us/articles/115002735274-SVG-Files-Basics SVG Files Basics]''' — at Shaper Tools
 
−
:[https://www.youtube.com/watch?v=4laPOtTRteI '''SVG can do THAT?!'''] — by [https://sarahdrasnerdesign.com/ '''Sarah Drasner''']
 
−
:'''[https://hub.shapertools.com/search?search=svg svg files at Shaper|Hub]'''
 
−
:'''[https://www.openstreetmap.org/about OpenStreetMap]''' — the free wiki world map.
 
−
:'''[https://codepen.io/ CodePen]''' — build, test, and discover front-end code.
 
−
:'''[https://svgwave.in/?ref=uigoodies.com Generate SVG Waves]'''
 
  
−
== For Additional Help ==
 
 
: Use the PPM Slack channel #computing
 
: Use the PPM Slack channel #computing
 
:[[How To Slack#PPM Channel Names and Descriptions|'''List of all PPM Slack channels''']]
 
:[[How To Slack#PPM Channel Names and Descriptions|'''List of all PPM Slack channels''']]
 
:Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the&nbsp;community.
 
:Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the&nbsp;community.
 
{{Template:Footer}}
 
{{Template:Footer}}
−
{{Template:Ideas into reality}}
 
 
<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> &nbsp; </p>
 
<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> &nbsp; </p>
 +
 
[[Category:Software]]
 
[[Category:Software]]

Latest revision as of 20:32, 17 February 2025

SVG stands for Scalable Vector Graphics, a document format to reproduce 2D graphics.

Scalable means the graphics can be made larger without loss of quality. (This is not always true with raster graphics.)

Additionally, storage space needed for SVG files is usually less than raster files.

SVG files are usually created in "drawing" software such as Inkscape or Adobe Illustrator.

However, SVG files can even be generated manually or programmatically.

SVG files can also be interactive and/or animated, and it can contain metadata.

(an SVGZ file is a compressed SVG file.)

Contact Us if you cannot find your answer here on our Wiki or if you notice any information that is outdated.

 


burst of white rays on orange background

Tips

  • Preview SVG files (with software at PPM):
Brave, Google Chrome, Microsoft Edge, and Mozilla Firefox (web browsers)
Adobe Bridge (digital asset browser)
  • Open SVG files (with software at PPM):
Inkscape, Adobe Illustrator, VCarve, LightBurn
  • Import SVG files (with software at PPM):
Inkscape, VCarve, Blender
Mathematica — Import the SVG file format
  • Paste SVG files into files (with software at PPM):
Adobe Illustrator
  • Rasterize SVG files (with software at PPPM):
Adobe Photoshop
  • Save (Save As, Export) SVG files (with software at PPM):
Inkscape (The native file format of Inkscape is .svg)
Adobe Illustrator
Canva
CorelDRAW
Mathematica — Export static SVG files
Additionally, OpenStreetMap can save images in SVG format
  • Live code in SVG (with software at PPM):
Visual Studio Code and the third party extension "SVG"


External Training

Links to external sites:

Getting Started with SVG — at mdn web docs
SVG Files Basics — at Shaper Tools
Help:SVG — at Wikimedia Commons
CodePen — build, test, and discover front-end code

SVG Animations

Links to external sites:

SVG can do THAT?! — by Sarah Drasner
SVG Animation — at W3Schools

SVG Marketplace

Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the community.
(Use our #job-board channel if you want to hire somebody to create a file, for example.)

Links to external sites:

svg files at Shaper|Hub
Generate SVG Waves

Hand-Curated Links

Links to member-recommended external sites:

SVGnest — arrange parts to use as little material as possible
OpenStreetMap — the free wiki world map.

Additional Help

Links to related PPM Wiki pages:

Inkscape Tips
Adobe Illustrator Tips
Adobe Bridge Tips
Visual Studio Code Tips
Canva Tips
CorelDRAW X6 Tips
Blender Tips
File Format Tips
  Computers — Windows  
  Computers — Mac and Apple  
  Computers — Ubuntu  
Use the PPM Slack channel #computing
List of all PPM Slack channels
Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the community.

Search the PPM Wiki — include Content pages as well as Multimedia.

Contact Us if you cannot find your answer here on our Wiki or if you notice any information that is outdated.

 

Retrieved from "https://wiki.pikespeakmakerspace.org/index.php?title=SVG_File_Format_Tips&oldid=19738"