https://github.com/dsward2/macSVG

macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ➤➤➤
https://github.com/dsward2/macSVG

animation bezier editor graphics html5 ios mac macos macos-webkit-framework morphing objective-c path scalable-vector-graphics smil svg swift vector-graphics web-developer webkit xml

Last synced: 3 months ago
JSON representation

macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ➤➤➤

• Host: GitHub
• URL: https://github.com/dsward2/macSVG
• Owner: dsward2
• License: other
• Created: 2016-10-17T08:37:55.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-07-17T04:46:15.000Z (over 2 years ago)
• Last Synced: 2024-04-26T11:33:51.135Z (6 months ago)
• Topics: animation, bezier, editor, graphics, html5, ios, mac, macos, macos-webkit-framework, morphing, objective-c, path, scalable-vector-graphics, smil, svg, swift, vector-graphics, web-developer, webkit, xml
• Language: Objective-C
• Homepage: http://macsvg.org/
• Size: 8.99 MB
• Stars: 1,119
• Watchers: 42
• Forks: 70
• Open Issues: 22
• Metadata Files:
  • Readme: README.html
  • License: LICENSE

Awesome Lists containing this project

• open-source-mac-os-apps - macSVG - macOS application for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view. ![objective_c_icon] (Applications / Graphics)
• open-source-mac-os-apps - macSVG - macOS application for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view. ![objective_c_icon] (Applications / Graphics)

README

        


README

body {

  font-family: Helvetica, arial, sans-serif;

  font-size: 14px;

  line-height: 1.6;

  padding-top: 10px;

  padding-bottom: 10px;

  background-color: white;

  padding: 30px; }

body > *:first-child {

  margin-top: 0 !important; }

body > *:last-child {

  margin-bottom: 0 !important; }

a {

  color: #4183C4; }

a.absent {

  color: #cc0000; }

a.anchor {

  display: block;

  padding-left: 30px;

  margin-left: -30px;

  cursor: pointer;

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0; }

h1, h2, h3, h4, h5, h6 {

  margin: 20px 0 10px;

  padding: 0;

  font-weight: bold;

  -webkit-font-smoothing: antialiased;

  cursor: text;

  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;

  text-decoration: none; }

h1 tt, h1 code {

  font-size: inherit; }

h2 tt, h2 code {

  font-size: inherit; }

h3 tt, h3 code {

  font-size: inherit; }

h4 tt, h4 code {

  font-size: inherit; }

h5 tt, h5 code {

  font-size: inherit; }

h6 tt, h6 code {

  font-size: inherit; }

h1 {

  font-size: 28px;

  color: black; }

h2 {

  font-size: 24px;

  border-bottom: 1px solid #cccccc;

  color: black; }

h3 {

  font-size: 18px; }

h4 {

  font-size: 16px; }

h5 {

  font-size: 14px; }

h6 {

  color: #777777;

  font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {

  margin: 15px 0; }

hr {

  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;

  border: 0 none;

  color: #cccccc;

  height: 4px;

  padding: 0;

}

body > h2:first-child {

  margin-top: 0;

  padding-top: 0; }

body > h1:first-child {

  margin-top: 0;

  padding-top: 0; }

  body > h1:first-child + h2 {

    margin-top: 0;

    padding-top: 0; }

body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {

  margin-top: 0;

  padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {

  margin-top: 0;

  padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {

  margin-top: 0; }

li p.first {

  display: inline-block; }

li {

  margin: 0; }

ul, ol {

  padding-left: 30px; }

ul :first-child, ol :first-child {

  margin-top: 0; }

dl {

  padding: 0; }

  dl dt {

    font-size: 14px;

    font-weight: bold;

    font-style: italic;

    padding: 0;

    margin: 15px 0 5px; }

    dl dt:first-child {

      padding: 0; }

    dl dt > :first-child {

      margin-top: 0; }

    dl dt > :last-child {

      margin-bottom: 0; }

  dl dd {

    margin: 0 0 15px;

    padding: 0 15px; }

    dl dd > :first-child {

      margin-top: 0; }

    dl dd > :last-child {

      margin-bottom: 0; }

blockquote {

  border-left: 4px solid #dddddd;

  padding: 0 15px;

  color: #777777; }

  blockquote > :first-child {

    margin-top: 0; }

  blockquote > :last-child {

    margin-bottom: 0; }

table {

  padding: 0;border-collapse: collapse; }

  table tr {

    border-top: 1px solid #cccccc;

    background-color: white;

    margin: 0;

    padding: 0; }

    table tr:nth-child(2n) {

      background-color: #f8f8f8; }

    table tr th {

      font-weight: bold;

      border: 1px solid #cccccc;

      margin: 0;

      padding: 6px 13px; }

    table tr td {

      border: 1px solid #cccccc;

      margin: 0;

      padding: 6px 13px; }

    table tr th :first-child, table tr td :first-child {

      margin-top: 0; }

    table tr th :last-child, table tr td :last-child {

      margin-bottom: 0; }

img {

  max-width: 100%; }

span.frame {

  display: block;

  overflow: hidden; }

  span.frame > span {

    border: 1px solid #dddddd;

    display: block;

    float: left;

    overflow: hidden;

    margin: 13px 0 0;

    padding: 7px;

    width: auto; }

  span.frame span img {

    display: block;

    float: left; }

  span.frame span span {

    clear: both;

    color: #333333;

    display: block;

    padding: 5px 0 0; }

span.align-center {

  display: block;

  overflow: hidden;

  clear: both; }

  span.align-center > span {

    display: block;

    overflow: hidden;

    margin: 13px auto 0;

    text-align: center; }

  span.align-center span img {

    margin: 0 auto;

    text-align: center; }

span.align-right {

  display: block;

  overflow: hidden;

  clear: both; }

  span.align-right > span {

    display: block;

    overflow: hidden;

    margin: 13px 0 0;

    text-align: right; }

  span.align-right span img {

    margin: 0;

    text-align: right; }

span.float-left {

  display: block;

  margin-right: 13px;

  overflow: hidden;

  float: left; }

  span.float-left span {

    margin: 13px 0 0; }

span.float-right {

  display: block;

  margin-left: 13px;

  overflow: hidden;

  float: right; }

  span.float-right > span {

    display: block;

    overflow: hidden;

    margin: 13px auto 0;

    text-align: right; }

code, tt {

  margin: 0 2px;

  padding: 0 5px;

  white-space: nowrap;

  border: 1px solid #eaeaea;

  background-color: #f8f8f8;

  border-radius: 3px; }

pre code {

  margin: 0;

  padding: 0;

  white-space: pre;

  border: none;

  background: transparent; }

.highlight pre {

  background-color: #f8f8f8;

  border: 1px solid #cccccc;

  font-size: 13px;

  line-height: 19px;

  overflow: auto;

  padding: 6px 10px;

  border-radius: 3px; }

pre {

  background-color: #f8f8f8;

  border: 1px solid #cccccc;

  font-size: 13px;

  line-height: 19px;

  overflow: auto;

  padding: 6px 10px;

  border-radius: 3px; }

  pre code, pre tt {

    background-color: transparent;

    border: none; }

sup {

    font-size: 0.83em;

    vertical-align: super;

    line-height: 0;

}

kbd {

  display: inline-block;

  padding: 3px 5px;

  font-size: 11px;

  line-height: 10px;

  color: #555;

  vertical-align: middle;

  background-color: #fcfcfc;

  border: solid 1px #ccc;

  border-bottom-color: #bbb;

  border-radius: 3px;

  box-shadow: inset 0 -1px 0 #bbb

}

* {

	-webkit-print-color-adjust: exact;

}

@media screen and (min-width: 914px) {

    body {

        width: 854px;

        margin:0 auto;

    }

}

@media print {

	table, pre {

		page-break-inside: avoid;

	}

	pre {

		word-wrap: break-word;

	}

}

macSVG 1.2




July 16, 2022 – This release of macSVG 1.2 adds support for Macs with Apple Silicon M1/M2 processors.




macSVG is a MIT-licensed open-source macOS app for designing HTML5 SVG 1.1 (Scalable Vector Graphics) art and animation.




macSVG can produce dynamic, high-quality graphics and animation for HTML5 web views that work on most major desktop and mobile platforms, including iOS, Android, macOS, Microsoft Windows and Linux.


macSVG uses the standard macOS WebKit framework for interactive editing and rendering of SVG documents, in addition to several Cocoa plug-in bundles for editing SVG elements and attributes.


The latest version of macSVG.app – code-signed with a registered Apple ID from the developer – is available for download at the Github project release page: 


https://github.com/dsward2/macSVG/releases


See the macSVG website for more documentation and release notes - https://macsvg.org/


Examples:








Apple’s free Xcode system is required to build the macOS application from the source code. Most of the application source code is written in Objective-C language, but a Swift language target has been added recently for a plug-in editor bundle.  To build macSVG.app, open "macSVG.xcworkspace" in Xcode, set the build target to "macSVG Debug", build and run.


See the macSVG.org Developer page for more info: https://macsvg.org/developer/


Future project goals:


Migration to Swift language, and Swift Package Manager for importing third-party code.


We are monitoring the WebKit project concerning their plans to remove the Legacy WebView framework, which is used extensively in macSVG.  


Copyright (c) 2016-2022 by ArkPhone, LLC.


All trademarks are the property of their respective holders.