I'd like to create a virtual space where I want to mix 3D elements and html content. I have seem some demos with WebVR but didn't work for me. WebAR is also an interesting option.
Thanks
Unfortunately, this isn't possible at the moment, because
there is no proper way to get your hands on the rastered output of the HTML in order to use it as a texture in WebGL and
there is no way to get any html-element shown in a WebVR-context
There is certainly work being done in both directions, but your best bets would probably be a-frame (https://aframe.io/) or reactVR (https://developer.oculus.com/blog/introducing-the-react-vr-pre-release/) which both at least have a bit of that html-feeling to it and can handle text pretty well (nothing compared to the power of html+css, but they will get there at some point).
Another option is to use a library like html2canvas (https://html2canvas.hertzen.com/) to get some rendered output from a piece of html which you can then use as a texture. Also has it's limits but might be worth a try...
Have fun!
I have icon in Sketch, but when I export it to SVG, it's somehow corrupted. I have no idea why and how to solve that. Can you help me?
Result:
Source: http://test.marekcernak.cz/leave.sketch
Redraw your leaf design to avoid paths that overlap themselves.
I don't use Sketch, but there have been similar questions relating to Sketch and issues it has regarding incompatible support for fill-rule (a.k.a. winding rule). For example see this this question.
If you fix the overlaps, I believe you should have much better results when you export to SVG.
It seems like you have style collision with other SVGs that you have exported to use in the same page. Make sure you use unique names for id and class attributes.
Im trying to use SVG-Graphics in a CHM-File. The CHM is created by HTML Help Worshop. Unfortunately the svg files dont show in my compiled chm... (Everything works fine in Html)
I already added my SVG to the Files section of my hhp. But still nothing.
Has anyone succeeded in using SVG Files in CHM created with Html Help Workshop?
Any Help is really appreciated!
Regards
Christian
(This topic is only related to SVG. Bitmaps work just fine...)
HTML Help Viewer renders topics in the IE 7 standards mode for compatibility reasons (see these answers), and IE doesn't support SVG until v. 9.
Possible solutions:
Change the FEATURE_BROWSER_EMULATION registry flag to make HTML Help Viewer use the IE 9 mode.
Use some JavaScript SVG libraries to render SVG. (Didn't try it though; just an idea.)
I'm looking to do a portfolio site, and I wanted to do some creative drawing on the website without using images.
I considered canvas, which I really think would be cool, plus an interesting project, however, I heard that IE has no compatibility (is that true?) so I cannot have that.
Then, I considered Raphaël, which seems like it's the most viable option thus far.
Ughh, there was another library that I can't remember the name to, which also seemed like a good option.
What do you guys think about Raphaël and its overall compatibility, and its capabilities, regarding the kinds of drawing its capable of. I was browsing through the documentation and I think it's quite powerful.
Do you want to draw the vector graphics on the site itself, or just publish premade vector graphics?
If the former, have a look at svg-edit which can easily be embedded in your site, and which works in most browsers (old IE versions require the chrome frame plugin, but IE9 will be supported by svg-edit 2.6).
If the latter then there are probably many options, here are a couple off the top of my head:
Use SVGWeb - get started quickly with that using templates from svgboilerplate.com
Serve svg to browsers that support it, and static images to everyone else
<object data="your.svg" type="image/svg+xml"><img src="staticyoursvg.png"></object>
Well you could download Inkscape and draw what you want cross-browser in there.
Then go to my website (Page with tool and instructions below) and use the SVGTOHTML converter there.
I'm adding more with each release.
The SVG is conveted into Raphael and there are a couple of options as to what format you can have.
The version is at 0.57 at the point of typing this.
http://www.irunmywebsite.com/raphael/svgsource.php
It isn’t true that IE doesn’t support canvas. IE9 will support it, which is the same version that will support SVG.
For SVG development, it depends what you want to do. For static images you can even use Illustrator or Inkscape then save/export as SVG. If you do this, remember to use Scour [0], as the auto-generated markup can be a bit crufty. I usually just write the SVG by hand, unless I'm doing something complex, in which case it is better to use a image editor.
There are no real good editors to add animations though, so I always add those by hand. Things like SMIL (used for animating SVG) are not that difficult to learn, but a bit verbose. If you use SMIL then it is recommended to use FakeSMIL, which is included in the SVGBoilerplate that Erik links to above, as some browsers have lacking support for SMIL.
If you want to use a JS library to generate the SVG rather than writing by hand or using an editor, then Raphaël is probably the most mature. There is also Dojo GFX [1]. Which is best really depends on personal preference and what you are trying to do. It would be best to try them out with something simple and see which you prefer.
[0] http://www.codedread.com/scour/
[1] http://docs.dojocampus.org/dojox/gfx
Look into SVG Web, it uses Flash to emulate SVG in non-supporting browsers. It's written by industry leaders like Brad Neuberg and it doesn't interfere with the way you want to write SVG markup so when the browsers that don't support SVG disappear you can ditch it and your SVG markup will still work. With Raphaël, you have to to write JavaScript code instead of SVG markup, so you have to keep using it forever, or re-code your graphics. Also, Raphaël only supports the lowest common denominator between SVG and VML, so you can't do much. It even emulates some VML bugs in SVG, so that both graphics look the same. Raphaël is better for dynamically generated SVG, but for other cases, I'd recommend SVG Web.
Is it possible to simplify / clean up svg code by replacing the use-tags with standard svg elements? Maybe an inkscape plugin? Haven't found anything...
Background: I'm converting some svgs to javafx graphics (.fxz) with javafx's production suite. And the tool doesn't understand the <use> element.
Take a look at Scour - an SVG scrubber
Scour is an open-source Python script that aggressively cleans SVG files, removing a lot of 'cruft' that certain tools or authors embed into their documents. The goal of scour is to provide an identically rendered image (i.e. a scoured document should have no discernable visible differences from the original file).
They also have an extension for Inkscape as of v.48. To use it, go to "Save As.." and choose "Optimized .SVG. Be careful, and check your output, as I've found it can get too aggressive. Take these examples for instance, if they show up...
Good: Bad:
They claim to have and an online tool that does the same tricks... but as of 6/2011 it was not working. Hope this helps you clean up those often SCARY looking SVG's. Sometimes I feel like I'm the only one that realizes what this format is capable of!