Difference between revisions of "SVG File Format Tips"

From Pikes Peak Makerspace Wiki
Jump to navigation Jump to search
Line 44: Line 44:
 
'''Links to external sites:'''
 
'''Links to external sites:'''
  
===[[wikipedia:SVG|SVG]] — on Wikipedia ===
+
:'''[https://developer.mozilla.org/en-US/docs/Web/SVG Getting Started with SVG]''' — at mdn web docs
===[[commons:Help:SVG|Help:SVG]] — at Wikimedia Commons ===
+
:'''[https://support.shapertools.com/hc/en-us/articles/115002735274-SVG-Files-Basics SVG Files Basics]''' — at Shaper Tools
 +
:'''[https://codepen.io/ CodePen]''' — build, test, and discover front-end code
 +
:[[wikipedia:SVG|'''SVG''']] — on Wikipedia
 +
:[[commons:Help:SVG|'''Help:SVG''']] — at Wikimedia Commons
  
 
== SVG Animations ==
 
== SVG Animations ==
Line 53: Line 56:
 
== SVG Marketplace ==
 
== SVG Marketplace ==
 
'''Links to member-recommended external sites:'''
 
'''Links to member-recommended external sites:'''
 +
:'''[https://hub.shapertools.com/search?search=svg svg files at Shaper|Hub]'''
 
:'''[https://svgwave.in/?ref=uigoodies.com Generate SVG Waves]'''
 
:'''[https://svgwave.in/?ref=uigoodies.com Generate SVG Waves]'''
  
Line 70: Line 74:
 
'''Links to member-recommended external sites:'''
 
'''Links to member-recommended external sites:'''
 
:'''[https://svgnest.com/ SVGnest]''' — arrange parts to use as little material as possible
 
:'''[https://svgnest.com/ SVGnest]''' — arrange parts to use as little material as possible
:'''[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://hub.shapertools.com/search?search=svg svg files at Shaper|Hub]'''
 
 
:'''[https://www.openstreetmap.org/about OpenStreetMap]''' — the free wiki world map.
 
:'''[https://www.openstreetmap.org/about OpenStreetMap]''' — the free wiki world map.
:'''[https://codepen.io/ CodePen]''' — build, test, and discover front-end code.
 
  
 
== For Additional Help ==
 
== For Additional Help ==

Revision as of 15:46, 16 July 2024

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.

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.

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

 


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
MathematicaImport the SVG file format
  • Paste SVG files into files (with software at PPM):
Adobe Illustrator
  • Save (Save As, Export) SVG files (with software at PPM):
Canva
Inkscape (The native file format of Inkscape is .svg)
Adobe Illustrator
CorelDRAW
MathematicaExport 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"

Classes

PPM announces its Upcoming events, including classes, on Meetup

Training

Links to external sites:

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

SVG Animations

Links to member-recommended external sites:

SVG can do THAT?! — by Sarah Drasner

SVG Marketplace

Links to member-recommended external sites:

svg files at Shaper|Hub
Generate SVG Waves

Related Pages

Links to related PPM Wiki pages:

Inkscape Tips
Adobe Illustrator Tips
Adobe Bridge Tips
Visual Studio Code Tips
Canva Tips
Blender Tips
  Computers — Windows  
  Computers — Mac and Apple  

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.

For Additional Help

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.

Pikes Peak Makerspace (PPM) is dedicated to supporting our maker community in their creative processes by providing shared space, shared tools, materials, software, and a knowledge base to turn their ideas into reality.