favorite comment<\/a> from the previous post was a manually coded rendition of the SVG illustration. The code was much cleaner and way more efficient than any of the versions generated by the applications being compared.<\/p>\nWhether or not it was the point of the comment, what I love most about it is how it proves we cannot always take what applications give us for granted. It’s freaking amazing that an application like Sketch can take a series of shapes I draw on a screen and turn them into valid and working code, but is it the best code for the situation? It could be. Then again, the commenter proved that it could be done better if the goal was a smaller file size and more readable code.<\/p>\n
All three of the applications I tested are remarkably smart, incredibly useful, and have unique strengths that make each one a legitimate and indispensable tool in anyone’s web development arsenal. The point here is not to distrust them or stay away from using them.<\/p>\n
The point is that they are only as smart as the people using them. If we give them bad shapes and disorganized layers, then we can likely expect less-than-optimal code in return. I would go so far as to say that my method for creating the illustration in the experiment likely influenced the final output in all three cases and may not have given the applications the best shot for generating stellar code.<\/p>\n
Either way, it took a human reviewing that generated code and optimizing it by hand to make the point.<\/p>\n
Wrapping Up<\/h3>\n
I want to give a big ol’ thanks to everyone who commented on the previous post. What started as a simple personal curiosity became a more nuanced experiment and I was stoked to see it spark healthy debate and insightful ideas. It was those comments and some ensuing offline conversations that made me think deeper about about the the hand-off between design and development which ultimately wound up being the key takeaway from the entire exercise.<\/p>\n","protected":false},"excerpt":{"rendered":"
I recently did an experiment where I created the same vector illustration in three different applications, exported the illustration as SVG in each application, then wrote a post comparing the exported code. While I loved the banter and insights that came in the comments, I was surprised that the bulk of conversation was centered on […]<\/p>\n","protected":false},"author":2508,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[639,764,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":256867,"url":"https:\/\/css-tricks.com\/one-illustration-three-svg-outputs\/","url_meta":{"origin":259737,"position":0},"title":"One Illustration, Three SVG outputs","date":"July 25, 2017","format":false,"excerpt":"Let's say we draw the same vector graphic in different design applications and export each one as SVG for use on the web. Should we expect the same SVG file from each application? On the one hand, we might expect each file to be the same because of our past\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":247358,"url":"https:\/\/css-tricks.com\/illustrator-to-svg\/","url_meta":{"origin":259737,"position":1},"title":"The Different Ways of Getting SVG Out of Adobe Illustrator","date":"November 18, 2016","format":false,"excerpt":"Let's say you created a lovely vector illustration in Adobe Illustrator. Or you\u2019ve used Illustrator to finesse some existing graphics. Or for literally any reason at all, you have a file open in Adobe Illustrator that you ultimately want to use on the web as SVG. There are several different\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":166665,"url":"https:\/\/css-tricks.com\/svg-wordpress-custom-fields\/","url_meta":{"origin":259737,"position":2},"title":"SVG & WordPress Custom Fields","date":"March 24, 2014","format":false,"excerpt":"The following is a guest post by Ian Marquette. Ian learned that SVG can have a element, meaning that text could come from a dynamic source while still being able to do cool custom SVG-specific stuff to it. I was recently working on a WordPress-based website that needed an infographic.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":346259,"url":"https:\/\/css-tricks.com\/svg-gobbler\/","url_meta":{"origin":259737,"position":3},"title":"SVG Gobbler","date":"August 6, 2021","format":false,"excerpt":"Great little project from Ross Moody: SVG Gobbler is a browser extension that finds the vector content on the page you're viewing and gives you the option to download, optimize, copy, view the code, or export it as an image. When a site uses SVG as an , you can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/site-mockup-614f0bf63517119eb7811c8b76c43121.png?fit=1200%2C883&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365828,"url":"https:\/\/css-tricks.com\/mastering-svgs-stroke-miterlimit-attribute\/","url_meta":{"origin":259737,"position":4},"title":"Mastering SVG’s stroke-miterlimit Attribute","date":"May 24, 2022","format":false,"excerpt":"So, SVG has this stroke-miterlimit presentation attribute. You\u2019ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find out you could remove it without noticing any change to the visual appearance. After a good amount of research, one of the first things I discovered\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/stroke-ventor-points-miter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305467,"url":"https:\/\/css-tricks.com\/how-to-animate-text-with-svg-and-css\/","url_meta":{"origin":259737,"position":5},"title":"How to Animate Text with SVG and CSS","date":"March 25, 2020","format":false,"excerpt":"The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word \u201centhusiasm\u201d in the title animate a little bit? Like, what if each of the letters in the word bopped up\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/letter-sbouncing.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259737"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=259737"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259737\/revisions"}],"predecessor-version":[{"id":259739,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259737\/revisions\/259739"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=259737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=259737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=259737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}