{"id":3030,"date":"2022-05-01T05:34:53","date_gmt":"2022-05-01T05:34:53","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3030"},"modified":"2023-06-12T14:31:37","modified_gmt":"2023-06-12T14:31:37","slug":"css-tutorial-graphery-svg","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-graphery-svg\/","title":{"rendered":"CSS Tutorial – Graphery SVG"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– I\u2019ve compared SVG and Canvas before.\u00a0If you\u2019re trying to decide between them, read that. I\u2019d say the #1 difference between them is vector (SVG) versus raster (Canvas). But the #2 difference is how you work with them. SVG is declarative, as in, literal elements that express what they are through attributes and content. Canvas is imperative, as in, you script instructions for it to follow.<\/p>\n

Canvas is a JavaScript API, so it may jive well with JavaScript developers or environments where the UI being built is otherwise JavaScript-based. But SVG is in the (and has a) DOM, and the DOM has APIs too! That means you can script SVG if you like. It\u2019s just, arguably, not particularly convenient. I just saw\u00a0Graphery SVG<\/a>\u00a0which is clearly an attempt to rectify that.<\/p>\n

How you\u2019d script the creation of a pink rectangle with standard DOM APIs:<\/p>\n

const div = document.querySelector('#drawing');\r\nconst svg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'svg');\r\nsvg.setAttribute('width', '100%');\r\nsvg.setAttribute('height', '100%');\r\ndiv.appendChild(svg);\r\nconst rect = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\nrect.setAttribute('x', '10');\r\nrect.setAttribute('y', '10');\r\nrect.setAttribute('width', '90');\r\nrect.setAttribute('height', '90');\r\nrect.setAttribute('fill', '#F06');\r\nsvg.appendChild(rect);<\/pre>\n
With Graphery SVG:<\/p>\n
const svg = gySVG().width('100%').height('100%');\r\nconst rect = svg.add('rect').x(10).y(10).width(90).height(90).fill('#f06');\r\nsvg.attachTo('#drawing');<\/pre>\n
 <\/p>\n
\n
\n
Gotta love that chaining. High five, jQuery.<\/p>\n
DIRECT LINK \u2192<\/a><\/h2>\n<\/div>\n<\/article>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Rengga Dev – I\u2019ve compared SVG and Canvas before.\u00a0If you\u2019re trying to <\/a><\/p>\n","protected":false},"author":1,"featured_media":3746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,2],"tags":[197,270,103,227],"newstopic":[],"class_list":{"0":"post-3030","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-web-design","9":"tag-css-tutorial","10":"tag-graphery-svg","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3030"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3030\/revisions"}],"predecessor-version":[{"id":3162,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3030\/revisions\/3162"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3746"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3030"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}