Difference between revisions of "SVG File Format Tips"
Jump to navigation
Jump to search
| 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 | + | Scalable means the graphics can be made larger without loss of quality. This is not true with raster graphics. |
| − | SVG's are usually | + | 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. | ||
However, SVG files can even be generated manually or programmatically. | However, SVG files can even be generated manually or programmatically. | ||
| Line 15: | Line 17: | ||
<br> | <br> | ||
==Tips == | ==Tips == | ||
| − | * | + | *'''Preview SVGs ('''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): |
::Inkscape, Adobe Illustrator, VCarve, LightBurn | ::Inkscape, Adobe Illustrator, VCarve, LightBurn | ||
| − | * | + | *'''Import SVGs''' (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): |
::Adobe Illustrator | ::Adobe Illustrator | ||
| − | * | + | *'''Save (Save As, Export) SVG''' (with software at PPM): |
::Canva | ::Canva | ||
::Inkscape (The native file format of Inkscape is .svg) | ::Inkscape (The native file format of Inkscape is .svg) | ||
| Line 33: | Line 35: | ||
::'''[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 as SVG | ||
| − | *'''Live code in SVG with Visual Studio Code | + | *'''Live code in SVG''' (with software at PPM): |
| + | with Visual Studio Code and the third party extension "SVG" | ||
== Classes == | == Classes == | ||
| Line 39: | Line 42: | ||
== Training == | == Training == | ||
| − | + | '''Links to external sites:''' | |
| + | |||
===[[wikipedia:SVG|SVG]] — on Wikipedia === | ===[[wikipedia:SVG|SVG]] — on Wikipedia === | ||
===[[commons:Help:SVG|Help:SVG]] — at Wikimedia Commons === | ===[[commons:Help:SVG|Help:SVG]] — at Wikimedia Commons === | ||
== Related Pages == | == Related Pages == | ||
| − | Links to related PPM Wiki pages: | + | '''Links to related PPM Wiki pages:''' |
:'''[[Inkscape Tips]]''' | :'''[[Inkscape Tips]]''' | ||
:'''[[Adobe Illustrator Tips]]''' | :'''[[Adobe Illustrator Tips]]''' | ||
| Line 56: | Line 60: | ||
==Hand-Curated Links== | ==Hand-Curated Links== | ||
| − | 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://developer.mozilla.org/en-US/docs/Web/SVG Getting Started with SVG]''' — at mdn web docs | ||
Revision as of 15:27, 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's are usually created in "drawing" software such as Inkscape or Adobe Illustrator.
However, SVG files can even be generated manually or programmatically.
SVG's can also be interactive 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 SVGs (with software at PPM):
- Brave, Google Chrome, Microsoft Edge, and Mozilla Firefox (web browsers)
- Adobe Bridge (digital asset browser)
- Open SVGs (with software at PPM):
- Inkscape, Adobe Illustrator, VCarve, LightBurn
- Import SVGs (with software at PPM):
- Inkscape, VCarve, Blender
- Mathematica — Import the SVG file format
- Paste SVGs into files (with software at PPM):
- Adobe Illustrator
- Save (Save As, Export) SVG (with software at PPM):
- Canva
- Inkscape (The native file format of Inkscape is .svg)
- Adobe Illustrator
- CorelDRAW
- Mathematica — Export static SVG files
- Additionally, OpenStreetMap can save images as SVG
- Live code in SVG (with software at PPM):
with Visual Studio Code and the third party extension "SVG"
Classes
PPM announces its Upcoming events, including classes, on Meetup
Training
Links to external sites:
SVG — on Wikipedia
Help:SVG — at Wikimedia Commons
Related Pages
Links to related PPM Wiki pages:
- Inkscape Tips
- Adobe Illustrator Tips
- Adobe Bridge Tips
- Visual Studio Code Tips
- Canva Tips
- Blender Tips
Hand-Curated Links
Links to member-recommended external sites:
- SVGnest — arrange parts to use as little material as possible
- Getting Started with SVG — at mdn web docs
- SVG Files Basics — at Shaper Tools
- SVG can do THAT?! — by Sarah Drasner
- svg files at Shaper|Hub
- OpenStreetMap — the free wiki world map.
- CodePen — build, test, and discover front-end code.
- Generate SVG Waves
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.