need some criticized input please.

Drizzel

Did you draw them on an iOS device? If yes, which app did you use? I'm rather intrigued because Vectornator (what I'm using) is good, but certainly not perfect.

cvp

@stephen said:

my problem with that is i need them to be scene.Textures..

You can convert a sgv to an ui.Image via


import os
import ui

w = ui.WebView()
fpath = os.path.expanduser('~/Documents/test.svg')
w.load_url('file://'+fpath)
w.present('sheet')

with ui.ImageContext(w.width, w.height) as ctx:
	w.draw_snapshot()
	ui_image = ctx.get_image()
ui_image.show()

stephen

@cvp dos this preserve alpha?

stephen

@Drizzel said:

Did you draw them on an iOS device? If yes, which app did you use? I'm rather intrigued because Vectornator (what I'm using) is good, but certainly not perfect.

on iPad Air2
sketch
Draw
vectornator

most of it is hand painted and with Draw you can use brushes to draw vectors but vectornator give beter control of the vertices.. and the export scaling helps alot
y process for drawing usually goes...
Adobe Sketch ⇒ AdobeDraw for base structure
Adobe Draw ⇒ Adobe Sketch for detailing
Adobe Sketch ⇒ Vectornator for finalizing and export.

you can also save to creative cloud on vectornator to combine all three for pretty good workflow

cvp

@stephen said:

dos this preserve alpha?

No idea at all. I just thought a little time to find a solution svg -> ui.Image

stephen

@cvp thank you! when i get back to the animation system ill rewrite the texture cache and see if i can get that to work

stephen

@cvp said:

@stephen said:

my problem with that is i need them to be scene.Textures..

You can convert a sgv to an ui.Image via
import os
import ui

w = ui.WebView()
fpath = os.path.expanduser('~/Documents/test.svg')
w.load_url('file://'+fpath)
w.present('sheet')

with ui.ImageContext(w.width, w.height) as ctx:
	w.draw_snapshot()
	ui_image = ctx.get_image()
ui_image.show()

all i get is a white rect from this 😕

cvp

@stephen For me it is ok for a static svg but white rectangle if animated svg, what you did not yet ask at this moment 🙄

cvp

@stephen UIWebView does not support animated svg but SFSafariViewController does

See my script and for instance

	main('https://codyhouse.co/demo/animated-svg-icon/index.html')

stephen

@cvp

here is the same file im testing with. and the mage should have transparency

cvp

@stephen increase the frame and it is ok

import os
import ui

w = ui.WebView()
w.frame = (0,0,500,500)
fpath = os.path.expanduser('~/Documents/svg-test.svg')
#fpath = os.path.expanduser('~/Documents/test.svg')
w.load_url('file://'+fpath)
w.present('sheet')

with ui.ImageContext(w.width, w.height) as ctx:
	w.draw_snapshot()
	ui_image = ctx.get_image()
	ui_image.show()

stephen

@cvp

awesome didnt think about the frame. but sadely i seem to lose the alpha transparency. im sure i can go through the process of adding one but at that point id have to change format and then i lose the perks of vector graphics. plus id have to run the add alpha process to a library of images for the game and that seemsnlike a bad idea lol. thank you tho for checking it out for me 😊

cvp

@stephen transparency works

import os
import ui

v = ui.View()
v.frame = (0,0,500,250)
v.name = 'with or without opacity=0'

w1 = ui.WebView()
w1.frame = (0,0,250,250)
html = '''
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290">
	<path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z"
	fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round"/>
</svg>
'''
w1.load_html(html)
v.add_subview(w1)

w2 = ui.WebView()
w2.frame = (250,0,250,250)
html = '''
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290">
	<path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z"
	fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round" fill-opacity="0"/>
</svg>
'''
w2.load_html(html)
v.add_subview(w2)

v.present('sheet')

#with ui.ImageContext(w.width, w.height) as ctx:
#	w.draw_snapshot()
#	ui_image = ctx.get_image()
#	ui_image.show()

stephen

@cvp ya you are creating the opacity programaticaly (if thats the right term here lol ) where in my image it is solid where it should have a 50% alpha that i set in third party editor.

cvp

@stephen I don't know anything about it but it is only to show that WebView supports opacity in static svg...

cvp

@stephen how are sure that your file test-svg.svg is half transparent?

stephen

gotcha thank you @cvp 🙃

cvp

@stephen sorry, I don't understand What you mean

stephen

@cvp
its ok buddy i had done some research before (you probably know by now how i love research lol) and i couldnt find a way to use svg in scene. im sure there is an objc way but im not familier enough there lol

cvp

@stephen I just found that WebView supports animated svg, try this

import os
import ui

w = ui.WebView()
w.frame = (0,0,500,500)
#fpath = os.path.expanduser('~/Documents/svg-test.svg')
#w.load_url('file://'+fpath)
html = '''
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300">
    <rect class="mouse" x="0" y="0" width="800" height="300"/>
    <polygon class="diamondTu tulip" points="400, 280, 310, 150, 400, 20, 490, 150"/>
    <style>
        .mouse { fill: #E5E4E3; }
        .tulip { fill: #CC2954; }
        .diamondTu {
            animation-name: diamondTurns;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            transform-origin: 50% 50%;
        }
        @keyframes diamondTurns {
            0%   { transform: rotate(0deg); }
            50%  { transform: rotate(-90deg); }
            100% { transform: rotate(0deg); }
        }
    </style>
</svg
'''
w.load_html(html)
w.present('sheet')

#with ui.ImageContext(w.width, w.height) as ctx:
#	w.draw_snapshot()
#	ui_image = ctx.get_image()
#	ui_image.show()