tooth-paste Posted February 13, 2016 Share Posted February 13, 2016 Is anyone using SVG files? The sharpness is awesome! I like it and want to implement it into my site. What are your experiences? I understand that there is less browser support when you use it in an IMG tag, some use object or as a BACKGROUND-IMAGE. Also jQuery is an option. Any ideas? Link to comment Share on other sites More sharing options...
Mike Rockett Posted February 13, 2016 Share Posted February 13, 2016 Generally, I use inline SVG for easy manipulation. My stance is that if a browser doesn't have enough support SVG, then I don't support the browser. That said, I don't use much SVG... Just my 2c. 1 Link to comment Share on other sites More sharing options...
dragan Posted February 13, 2016 Share Posted February 13, 2016 We use it in a variety of ways. As inline (base64-encoded) :before / :after content, as bg-images or plain img-tags. For icon-stuff, we switched completely from icon-fonts to SVG a while ago. 1 Link to comment Share on other sites More sharing options...
gurkendoktor Posted February 13, 2016 Share Posted February 13, 2016 yes, i use it as css-property background-image and img tag. 1 Link to comment Share on other sites More sharing options...
horst Posted February 13, 2016 Share Posted February 13, 2016 We use it in a variety of ways. As inline (base64-encoded) :before / :after content, as bg-images or plain img-tags. For icon-stuff, we switched completely from icon-fonts to SVG a while ago. I have had a read about the way(s) one can embed it into CSS, where base64-encoded was title as sub-optimal as SVG is textbased (XML) and not binary data. They suggested this way: background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='120px' height='120px' viewBox='0 0 379 379'%3E %3Cg transform='matrix(1.25,0,0,-1.25,40,345)' id='g10'%3E %3Cg transform='scale(0.08,0.08)' id='g12'%3E %3Cpath id='path14' style='fill%3Argb(0,0,0)' d='m 1517.6,1767.02 c 138.62,0 251.01,-112.38 251.01,-251.02 0,-138.62 -112.39,-251.01 -251.01,-251.01 -138.64,0 -251.02,112.39 -251.02,251.01 0,138.64 112.38,251.02 251.02,251.02 z m -1.59,1264.99 C 679.137,3032.01 0.644531,2353.89 0.015625,1517.16 L 0,1517.16 0,749.051 388.961,403.559 l 0,1127.031 c 0,622.48 504.602,1127.06 1127.049,1127.06 622.45,0 1127.03,-504.58 1127.03,-1127.06 0,-622.41 -504.58,-1127.031 -1127.03,-1127.031 l -206.22,0 0,552.769 206.22,0 c 317.15,0 574.32,257.102 574.32,574.262 0,317.2 -257.17,574.32 -574.32,574.32 -317.16,0 -574.291,-257.12 -574.291,-574.32 L 941.719,0 1516.01,0 c 837.26,0 1516.01,678.73 1516.01,1515.99 0,837.28 -678.75,1516.02 -1516.01,1516.02' /%3E %3C/g%3E %3C/g%3E %3C/svg%3E") --- If you like and are brave, just drop the data uri into your browsers URL bar and press enter: data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='120px' height='120px' viewBox='0 0 379 379'%3E %3Cg transform='matrix(1.25,0,0,-1.25,40,345)' id='g10'%3E %3Cg transform='scale(0.08,0.08)' id='g12'%3E %3Cpath id='path14' style='fill%3Argb(0,0,0)' d='m 1517.6,1767.02 c 138.62,0 251.01,-112.38 251.01,-251.02 0,-138.62 -112.39,-251.01 -251.01,-251.01 -138.64,0 -251.02,112.39 -251.02,251.01 0,138.64 112.38,251.02 251.02,251.02 z m -1.59,1264.99 C 679.137,3032.01 0.644531,2353.89 0.015625,1517.16 L 0,1517.16 0,749.051 388.961,403.559 l 0,1127.031 c 0,622.48 504.602,1127.06 1127.049,1127.06 622.45,0 1127.03,-504.58 1127.03,-1127.06 0,-622.41 -504.58,-1127.031 -1127.03,-1127.031 l -206.22,0 0,552.769 206.22,0 c 317.15,0 574.32,257.102 574.32,574.262 0,317.2 -257.17,574.32 -574.32,574.32 -317.16,0 -574.291,-257.12 -574.291,-574.32 L 941.719,0 1516.01,0 c 837.26,0 1516.01,678.73 1516.01,1515.99 0,837.28 -678.75,1516.02 -1516.01,1516.02' /%3E %3C/g%3E %3C/g%3E %3C/svg%3E 4 Link to comment Share on other sites More sharing options...
adrian Posted February 13, 2016 Share Posted February 13, 2016 I love SVG Take a look at caniuse.com for the list of browser support: http://caniuse.com/#search=svg - I agree with @Mike Rockett - if a browser doesn't support SVG, then I don't support it. If you are going to allow your editors to upload SVG files, be sure to install the SVG validator: http://modules.processwire.com/modules/file-validator-svg-sanitizer/ because they can be a security risk. 3 Link to comment Share on other sites More sharing options...
dragan Posted February 13, 2016 Share Posted February 13, 2016 There are handy Grunt and Gulp tools, e.g. http://mattsoria.com/killersvgworkflow/ For a site that used tons of icons (including :hover versions), we used Grunt tasks that: - scanned a folder full of SVGs - created an SVG sprite - wrote a .scss file with classes for each icon (based on some simple naming conventions) - plus: did the same thing, but as PNGs (IE9 / old browser fallback) I wouldn't use SVGs in HTML emails though. There are still various email clients (web-based, standalone desktop or mobile apps) that don't support it. https://css-tricks.com/a-guide-on-svg-support-in-email/ 3 Link to comment Share on other sites More sharing options...
tooth-paste Posted February 14, 2016 Author Share Posted February 14, 2016 Thanks for the replies. It looks to me that it is less complicated than I thought. I'am gonna use the IMG tag. I know that IE8 is not supported but that is not a problem. <img src="<?php echo $config->urls->templates; ?>img/logo.svg" height="80px" width="80px" alt="" /> I also tried to use it inline but I get a bottom padding of about 8 pixels. I have tried different files. Maybe it is the combination with foundation. Link to comment Share on other sites More sharing options...
MatthewSchenker Posted February 14, 2016 Share Posted February 14, 2016 Greetings tooth-paste, I also love SVGs and look for ways to use them anywhere I can. For years, I have been wondering why they are not more widespread, but I think there is a resurgence in their popularity now! The level of control with SVGs is amazing, and when you couple them with the flexibility of ProcessWire to manipulate the SVG elements, the possibilities are tremendous. In theory, you could have an entire site built from an SVG DOM. You probably already know about these, but I wanted to include them here: http://raphaeljs.com https://d3js.org http://snapsvg.io Each one of the above resources has its advantages. Personally, I really like Raphael. Thanks, Matthew 4 Link to comment Share on other sites More sharing options...
elabx Posted February 15, 2016 Share Posted February 15, 2016 I...don't use SVG... Could anyone point out to resources of how to properly use SVG? I have read that there are a number of ways of embedding SVG, fallback stuff, etc. Is the IMG tag as tooth-paste mentions, the most practical approach?? Link to comment Share on other sites More sharing options...
MatthewSchenker Posted February 15, 2016 Share Posted February 15, 2016 Greetings, Good discussion... Could anyone point out to resources of how to properly use SVG? I have read that there are a number of ways of embedding SVG, fallback stuff, etc. Is the IMG tag as tooth-paste mentions, the most practical approach?? There are many ways to go. SVGs are more like DOMs within your main DOM instead of classic images. They can be used like images, but the real power comes from being able to dynamically manipulate the code behind the images. There are a couple of different paths here. Generally: - Start with something like Adobe Illustrator or Sketch to create your SVGs. - Create CSS classes to manipulate the lines of the SVG files. - Use a simple code editor to tweak the SVG elements just like you would with an HTML document. How to include the SVGs: 1. Embed the SVGs inline using <img> tags. Simply upload the SVG to your "images" directory and reference it like any other image in your ProcessWire application. 2. "Include" the SVGs in your template. You can either (A) use the same "include" function you use for other ProcessWire files, or (B) directly load the SVG code into your template. Option A is easier to maintain and allows the same SVGs to be dynamic in multiple templates, which then opens up all kinds of other possibilities! 3. Use something like Raphael to manipulate the SVG further. But this is not necessary, especially for relatively simple examples. The syntax for manipulating SVG styles is not always the same as HTML styling. Here are a couple of good references: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS https://www.w3.org/TR/SVG/propidx.html https://www.w3.org/TR/SVG/styling.html As for help and resources, here are some general discussions: http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ https://css-tricks.com/using-svg/ https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/ Thanks, Matthew 5 Link to comment Share on other sites More sharing options...
adrian Posted February 15, 2016 Share Posted February 15, 2016 Just a quick comment as there has already been lots of great info offered up. SVGs are an amazing way to make interactive data visualizations, whether you use charts, maps, or colored icons, or diagrams. They are especially cool if you using data binding techniques via something like Angular, Meteor, or React, or one of a gazillion other new JS frameworks 1 Link to comment Share on other sites More sharing options...
elabx Posted February 15, 2016 Share Posted February 15, 2016 Generally: - Start with something like Adobe Illustrator or Sketch to create your SVGs. - Create CSS classes to manipulate the lines of the SVG files. - Use a simple code editor to tweak the SVG elements just like you would with an HTML document. How to include the SVGs: 1. Embed the SVGs inline using <img> tags. Simply upload the SVG to your "images" directory and reference it like any other image in your ProcessWire application. 2. "Include" the SVGs in your template. You can either (A) use the same "include" function you use for other ProcessWire files, or (B) directly load the SVG code into your template. Option A is easier to maintain and allows the same SVGs to be dynamic in multiple templates, which then opens up all kinds of other possibilities! 3. Use something like Raphael to manipulate the SVG further. But this is not necessary, especially for relatively simple examples. The syntax for manipulating SVG styles is not always the same as HTML styling. Here are a couple of good references: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS https://www.w3.org/TR/SVG/propidx.html https://www.w3.org/TR/SVG/styling.html As for help and resources, here are some general discussions: http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ https://css-tricks.com/using-svg/ https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/ Thanks, Matthew Thanks a lot Matthew!! I have done a few things with D3.js and it's amazing what can be done, just browsing the examples page is really great! For example, I am a BIG fan of this guy and his work, be sure to check it out. 2 Link to comment Share on other sites More sharing options...
Recommended Posts