Difference between revisions of "SVG File Format Tips"
Jump to navigation
Jump to search
| (11 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. | ||
| Line 9: | Line 9: | ||
However, SVG files can even be generated manually or programmatically. | However, SVG files can even be generated manually or programmatically. | ||
| − | SVG files can also be interactive and/or animated. | + | SVG files can also be interactive and/or animated, and it can contain metadata. |
| − | (an SVGZ file is a compressed SVG file) | + | (an SVGZ file is a compressed SVG file.) |
<br> | <br> | ||
<br> | <br> | ||
| Line 18: | Line 18: | ||
<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> </p> | <p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> </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 SVG files ('''with software at PPM): | *'''Preview SVG files ('''with software at PPM): | ||
| Line 39: | Line 41: | ||
*'''Live code in SVG''' (with software at PPM): | *'''Live code in SVG''' (with software at PPM): | ||
::Visual Studio Code and the third party extension "SVG" | ::Visual Studio Code and the third party extension "SVG" | ||
| − | |||
| − | |||
| − | |||
== Training == | == Training == | ||
| Line 48: | Line 47: | ||
:'''[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 | ||
:'''[https://support.shapertools.com/hc/en-us/articles/115002735274-SVG-Files-Basics SVG Files Basics]''' — at Shaper Tools | :'''[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 | ||
| + | |||
:'''[https://codepen.io/ CodePen]''' — build, test, and discover front-end code | :'''[https://codepen.io/ CodePen]''' — build, test, and discover front-end code | ||
| − | |||
| − | |||
== SVG Animations == | == SVG Animations == | ||
| − | '''Links to | + | '''Links to external sites:''' |
:[https://www.youtube.com/watch?v=4laPOtTRteI '''SVG can do THAT?!'''] — by [https://sarahdrasnerdesign.com/ '''Sarah Drasner'''] | :[https://www.youtube.com/watch?v=4laPOtTRteI '''SVG can do THAT?!'''] — by [https://sarahdrasnerdesign.com/ '''Sarah Drasner'''] | ||
| − | :'''[https://www.w3schools.com/graphics/svg_animation.asp SVG Animation]''' — at | + | :'''[https://www.w3schools.com/graphics/svg_animation.asp SVG Animation]''' — at '''[https://www.w3schools.com/ W3Schools]''' |
== SVG Marketplace == | == SVG Marketplace == | ||
| − | '''Links to | + | 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 example.) | ||
| + | |||
| + | '''Links to external sites:''' | ||
:'''[https://hub.shapertools.com/search?search=svg svg files at Shaper|Hub]''' | :'''[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 64: | Line 67: | ||
== 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 69: | Line 73: | ||
:'''[[Visual Studio Code Tips]]''' | :'''[[Visual Studio Code Tips]]''' | ||
:'''[[Canva Tips]]''' | :'''[[Canva Tips]]''' | ||
| + | :'''[[CorelDRAW X6 Tips]]''' | ||
:'''[[Blender Tips]]''' | :'''[[Blender Tips]]''' | ||
:[[Computers|<span style="color:#000000; background:#D0DD27"> '''Computers — Windows''' </span>]] | :[[Computers|<span style="color:#000000; background:#D0DD27"> '''Computers — Windows''' </span>]] | ||
| + | |||
:[[Computers -- Mac and Apple|<span style="color:#000000; background:#D0DD27"> '''Computers — Mac and Apple''' </span>]] | :[[Computers -- Mac and Apple|<span style="color:#000000; background:#D0DD27"> '''Computers — Mac and Apple''' </span>]] | ||
| + | |||
| + | :[[Computers — Ubuntu|<span style="color:#000000; background:#D0DD27"> '''Computers — Ubuntu''' </span>]] | ||
==Hand-Curated Links== | ==Hand-Curated Links== | ||
| Line 86: | Line 94: | ||
{{Template:Ideas into reality}} | {{Template:Ideas into reality}} | ||
<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> </p> | <p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> </p> | ||
| + | |||
[[Category:Software]] | [[Category:Software]] | ||
Latest revision as of 13:39, 21 November 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 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.
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
- Save (Save As, Export) SVG files (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 in SVG format
- Live code in SVG (with software at PPM):
- Visual Studio Code and the third party extension "SVG"
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:
Related Pages
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
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.