[{"data":1,"prerenderedAt":3693},["ShallowReactive",2],{"navigation":3,"/api/loaders/use-svg":474,"/api/loaders/use-svg-surround":3688},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,190,284,310,344,394,440],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432,436],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":437,"path":438,"stem":439},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":441,"path":442,"stem":443,"children":444},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[445,446,450,454,458,462,466,470],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":451,"path":452,"stem":453},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":455,"path":456,"stem":457},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":459,"path":460,"stem":461},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":463,"path":464,"stem":465},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":467,"path":468,"stem":469},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":471,"path":472,"stem":473},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":475,"title":145,"body":476,"description":3682,"extension":3683,"links":3684,"meta":3685,"navigation":606,"path":146,"seo":3686,"stem":147,"__hash__":3687},"docs/2.api/3.loaders/7.use-svg.md",{"type":477,"value":478,"toc":3657},"minimark",[479,485,502,507,513,517,1157,1162,1178,1182,1185,1300,1304,1386,1390,1502,1506,1511,1571,1576,1924,1928,1933,1939,1944,1950,1970,1976,1991,2038,2041,2046,2057,2062,2065,2110,2114,2119,2122,2127,2136,2181,2186,2191,2203,2208,2250,2254,2257,2387,2391,2395,2724,2728,3056,3060,3067,3288,3292,3463,3467,3474,3477,3481,3492,3496,3520,3528,3541,3545,3572,3576,3597,3607,3615,3632,3639,3653],[480,481,482],"scene-wrapper",{},[483,484],"loaders-use-svg",{},[486,487,488,489,493,494,497,498,501],"p",{},"Load and display SVG elements in your ",[490,491,492],"strong",{},"TresJS"," scene. This guide covers both the ",[495,496,145],"code",{}," composable for advanced use cases and the ",[495,499,500],{},"SVG"," component for simple declarative rendering.",[503,504,506],"h2",{"id":505},"usesvg-composable","useSVG Composable",[486,508,509,510,512],{},"The ",[495,511,145],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[514,515,15],"h3",{"id":516},"usage",[518,519,520,942],"code-group",{},[521,522,534],"pre",{"className":523,"code":524,"filename":525,"highlights":526,"language":532,"meta":533,"style":533},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst svgPath = './logo.svg'\nconst { state, layers, isLoading, dispose } = useSVG(svgPath, {\n  skipFills: false,\n  fillMaterial: { transparent: true, opacity: 0.8 }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup v-if=\"!isLoading\">\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"`layer-${index}`\"\n      :geometry=\"layer.geometry\"\n      :render-order=\"index\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n","TheModel.vue",[527,528,529,530,531],2,5,6,7,8,"vue","",[495,535,536,571,601,608,626,669,685,717,725,735,740,750,776,785,816,841,862,878,884,912,923,933],{"__ignoreMap":533},[537,538,541,545,549,553,556,559,562,566,568],"span",{"class":539,"line":540},"line",1,[537,542,544],{"class":543},"sMK4o","\u003C",[537,546,548],{"class":547},"swJcz","script",[537,550,552],{"class":551},"spNyl"," setup",[537,554,555],{"class":551}," lang",[537,557,558],{"class":543},"=",[537,560,561],{"class":543},"\"",[537,563,565],{"class":564},"sfazB","ts",[537,567,561],{"class":543},[537,569,570],{"class":543},">\n",[537,572,575,579,582,586,589,592,595,598],{"class":573,"line":527},[539,574],"highlight",[537,576,578],{"class":577},"s7zQu","import",[537,580,581],{"class":543}," {",[537,583,585],{"class":584},"sTEyZ"," useSVG",[537,587,588],{"class":543}," }",[537,590,591],{"class":577}," from",[537,593,594],{"class":543}," '",[537,596,597],{"class":564},"@tresjs/cientos",[537,599,600],{"class":543},"'\n",[537,602,604],{"class":539,"line":603},3,[537,605,607],{"emptyLinePlaceholder":606},true,"\n",[537,609,611,614,617,619,621,624],{"class":539,"line":610},4,[537,612,613],{"class":551},"const",[537,615,616],{"class":584}," svgPath ",[537,618,558],{"class":543},[537,620,594],{"class":543},[537,622,623],{"class":564},"./logo.svg",[537,625,600],{"class":543},[537,627,629,631,633,636,639,642,644,647,649,652,655,658,661,664,666],{"class":628,"line":528},[539,574],[537,630,613],{"class":551},[537,632,581],{"class":543},[537,634,635],{"class":584}," state",[537,637,638],{"class":543},",",[537,640,641],{"class":584}," layers",[537,643,638],{"class":543},[537,645,646],{"class":584}," isLoading",[537,648,638],{"class":543},[537,650,651],{"class":584}," dispose ",[537,653,654],{"class":543},"}",[537,656,657],{"class":543}," =",[537,659,585],{"class":660},"s2Zo4",[537,662,663],{"class":584},"(svgPath",[537,665,638],{"class":543},[537,667,668],{"class":543}," {\n",[537,670,672,675,678,682],{"class":671,"line":529},[539,574],[537,673,674],{"class":547},"  skipFills",[537,676,677],{"class":543},":",[537,679,681],{"class":680},"sfNiH"," false",[537,683,684],{"class":543},",\n",[537,686,688,691,693,695,698,700,703,705,708,710,714],{"class":687,"line":530},[539,574],[537,689,690],{"class":547},"  fillMaterial",[537,692,677],{"class":543},[537,694,581],{"class":543},[537,696,697],{"class":547}," transparent",[537,699,677],{"class":543},[537,701,702],{"class":680}," true",[537,704,638],{"class":543},[537,706,707],{"class":547}," opacity",[537,709,677],{"class":543},[537,711,713],{"class":712},"sbssI"," 0.8",[537,715,716],{"class":543}," }\n",[537,718,720,722],{"class":719,"line":531},[539,574],[537,721,654],{"class":543},[537,723,724],{"class":584},")\n",[537,726,728,731,733],{"class":539,"line":727},9,[537,729,730],{"class":543},"\u003C/",[537,732,548],{"class":547},[537,734,570],{"class":543},[537,736,738],{"class":539,"line":737},10,[537,739,607],{"emptyLinePlaceholder":606},[537,741,743,745,748],{"class":539,"line":742},11,[537,744,544],{"class":543},[537,746,747],{"class":547},"template",[537,749,570],{"class":543},[537,751,753,756,759,762,764,766,769,772,774],{"class":539,"line":752},12,[537,754,755],{"class":543},"  \u003C",[537,757,758],{"class":547},"TresGroup",[537,760,761],{"class":577}," v-if",[537,763,558],{"class":543},[537,765,561],{"class":543},[537,767,768],{"class":543},"!",[537,770,771],{"class":584},"isLoading",[537,773,561],{"class":543},[537,775,570],{"class":543},[537,777,779,782],{"class":539,"line":778},13,[537,780,781],{"class":543},"    \u003C",[537,783,784],{"class":547},"TresMesh\n",[537,786,788,791,793,795,798,801,804,807,810,813],{"class":539,"line":787},14,[537,789,790],{"class":577},"      v-for",[537,792,558],{"class":543},[537,794,561],{"class":543},[537,796,797],{"class":543},"(",[537,799,800],{"class":584},"layer",[537,802,803],{"class":543},", ",[537,805,806],{"class":584},"index",[537,808,809],{"class":543},") in ",[537,811,812],{"class":584},"layers",[537,814,815],{"class":543},"\"\n",[537,817,819,822,825,827,830,833,836,838],{"class":539,"line":818},15,[537,820,821],{"class":543},"      :",[537,823,824],{"class":551},"key",[537,826,558],{"class":543},[537,828,829],{"class":543},"\"`",[537,831,832],{"class":564},"layer-",[537,834,835],{"class":543},"${",[537,837,806],{"class":584},[537,839,840],{"class":543},"}`\"\n",[537,842,844,846,849,851,853,855,858,860],{"class":539,"line":843},16,[537,845,821],{"class":543},[537,847,848],{"class":551},"geometry",[537,850,558],{"class":543},[537,852,561],{"class":543},[537,854,800],{"class":584},[537,856,857],{"class":543},".",[537,859,848],{"class":584},[537,861,815],{"class":543},[537,863,865,867,870,872,874,876],{"class":539,"line":864},17,[537,866,821],{"class":543},[537,868,869],{"class":551},"render-order",[537,871,558],{"class":543},[537,873,561],{"class":543},[537,875,806],{"class":584},[537,877,815],{"class":543},[537,879,881],{"class":539,"line":880},18,[537,882,883],{"class":543},"    >\n",[537,885,887,890,893,896,898,900,902,904,907,909],{"class":539,"line":886},19,[537,888,889],{"class":543},"      \u003C",[537,891,892],{"class":547},"TresMeshBasicMaterial",[537,894,895],{"class":551}," v-bind",[537,897,558],{"class":543},[537,899,561],{"class":543},[537,901,800],{"class":584},[537,903,857],{"class":543},[537,905,906],{"class":584},"material",[537,908,561],{"class":543},[537,910,911],{"class":543}," />\n",[537,913,915,918,921],{"class":539,"line":914},20,[537,916,917],{"class":543},"    \u003C/",[537,919,920],{"class":547},"TresMesh",[537,922,570],{"class":543},[537,924,926,929,931],{"class":539,"line":925},21,[537,927,928],{"class":543},"  \u003C/",[537,930,758],{"class":547},[537,932,570],{"class":543},[537,934,936,938,940],{"class":539,"line":935},22,[537,937,730],{"class":543},[537,939,747],{"class":547},[537,941,570],{"class":543},[521,943,946],{"className":523,"code":944,"filename":945,"language":532,"meta":533,"style":533},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 10]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[495,947,948,968,987,1007,1024,1032,1036,1044,1065,1105,1114,1123,1132,1141,1149],{"__ignoreMap":533},[537,949,950,952,954,956,958,960,962,964,966],{"class":539,"line":540},[537,951,544],{"class":543},[537,953,548],{"class":547},[537,955,552],{"class":551},[537,957,555],{"class":551},[537,959,558],{"class":543},[537,961,561],{"class":543},[537,963,565],{"class":564},[537,965,561],{"class":543},[537,967,570],{"class":543},[537,969,970,972,974,977,979,981,983,985],{"class":539,"line":527},[537,971,578],{"class":577},[537,973,581],{"class":543},[537,975,976],{"class":584}," OrbitControls",[537,978,588],{"class":543},[537,980,591],{"class":577},[537,982,594],{"class":543},[537,984,597],{"class":564},[537,986,600],{"class":543},[537,988,989,991,993,996,998,1000,1002,1005],{"class":539,"line":603},[537,990,578],{"class":577},[537,992,581],{"class":543},[537,994,995],{"class":584}," TresCanvas",[537,997,588],{"class":543},[537,999,591],{"class":577},[537,1001,594],{"class":543},[537,1003,1004],{"class":564},"@tresjs/core",[537,1006,600],{"class":543},[537,1008,1009,1011,1014,1017,1019,1022],{"class":539,"line":610},[537,1010,578],{"class":577},[537,1012,1013],{"class":584}," TheModel ",[537,1015,1016],{"class":577},"from",[537,1018,594],{"class":543},[537,1020,1021],{"class":564},"./TheModel.vue",[537,1023,600],{"class":543},[537,1025,1026,1028,1030],{"class":539,"line":528},[537,1027,730],{"class":543},[537,1029,548],{"class":547},[537,1031,570],{"class":543},[537,1033,1034],{"class":539,"line":529},[537,1035,607],{"emptyLinePlaceholder":606},[537,1037,1038,1040,1042],{"class":539,"line":530},[537,1039,544],{"class":543},[537,1041,747],{"class":547},[537,1043,570],{"class":543},[537,1045,1046,1048,1051,1054,1056,1058,1061,1063],{"class":539,"line":531},[537,1047,755],{"class":543},[537,1049,1050],{"class":547},"TresCanvas",[537,1052,1053],{"class":551}," clear-color",[537,1055,558],{"class":543},[537,1057,561],{"class":543},[537,1059,1060],{"class":564},"#333",[537,1062,561],{"class":543},[537,1064,570],{"class":543},[537,1066,1067,1069,1072,1075,1078,1080,1082,1085,1088,1090,1093,1095,1098,1101,1103],{"class":539,"line":727},[537,1068,781],{"class":543},[537,1070,1071],{"class":547},"TresPerspectiveCamera",[537,1073,1074],{"class":543}," :",[537,1076,1077],{"class":551},"position",[537,1079,558],{"class":543},[537,1081,561],{"class":543},[537,1083,1084],{"class":543},"[",[537,1086,1087],{"class":712},"0",[537,1089,803],{"class":543},[537,1091,1092],{"class":712},"2",[537,1094,803],{"class":543},[537,1096,1097],{"class":712},"10",[537,1099,1100],{"class":543},"]",[537,1102,561],{"class":543},[537,1104,911],{"class":543},[537,1106,1107,1109,1112],{"class":539,"line":737},[537,1108,781],{"class":543},[537,1110,1111],{"class":547},"OrbitControls",[537,1113,911],{"class":543},[537,1115,1116,1118,1121],{"class":539,"line":742},[537,1117,781],{"class":543},[537,1119,1120],{"class":547},"TheModel",[537,1122,911],{"class":543},[537,1124,1125,1127,1130],{"class":539,"line":752},[537,1126,781],{"class":543},[537,1128,1129],{"class":547},"TresAmbientLight",[537,1131,911],{"class":543},[537,1133,1134,1136,1139],{"class":539,"line":778},[537,1135,781],{"class":543},[537,1137,1138],{"class":547},"TresDirectionalLight",[537,1140,911],{"class":543},[537,1142,1143,1145,1147],{"class":539,"line":787},[537,1144,928],{"class":543},[537,1146,1050],{"class":547},[537,1148,570],{"class":543},[537,1150,1151,1153,1155],{"class":539,"line":818},[537,1152,730],{"class":543},[537,1154,747],{"class":547},[537,1156,570],{"class":543},[486,1158,509,1159,1161],{},[495,1160,145],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[1163,1164,1165,1169,1172,1175],"ul",{},[1166,1167,1168],"li",{},"Manually control layer rendering",[1166,1170,1171],{},"Apply custom animations to individual layers",[1166,1173,1174],{},"Access geometry data programmatically",[1166,1176,1177],{},"Implement complex material logic",[514,1179,1181],{"id":1180},"svg-data-sources","SVG Data Sources",[486,1183,1184],{},"The composable accepts both file paths and inline SVG strings:",[521,1186,1189],{"className":1187,"code":1188,"language":565,"meta":533,"style":533},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useSVG } from '@tresjs/cientos'\n\n// From file\nconst { layers } = useSVG('/path/to/file.svg')\n\n// Inline SVG string\nconst svgString = `\u003Csvg viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\u003C/svg>`\nconst { layers } = useSVG(svgString)\n",[495,1190,1191,1209,1213,1219,1246,1250,1255,1270,1275,1283],{"__ignoreMap":533},[537,1192,1193,1195,1197,1199,1201,1203,1205,1207],{"class":539,"line":540},[537,1194,578],{"class":577},[537,1196,581],{"class":543},[537,1198,585],{"class":584},[537,1200,588],{"class":543},[537,1202,591],{"class":577},[537,1204,594],{"class":543},[537,1206,597],{"class":564},[537,1208,600],{"class":543},[537,1210,1211],{"class":539,"line":527},[537,1212,607],{"emptyLinePlaceholder":606},[537,1214,1215],{"class":539,"line":603},[537,1216,1218],{"class":1217},"sHwdD","// From file\n",[537,1220,1221,1223,1225,1228,1230,1232,1234,1236,1239,1242,1244],{"class":539,"line":610},[537,1222,613],{"class":551},[537,1224,581],{"class":543},[537,1226,1227],{"class":584}," layers ",[537,1229,654],{"class":543},[537,1231,657],{"class":543},[537,1233,585],{"class":660},[537,1235,797],{"class":584},[537,1237,1238],{"class":543},"'",[537,1240,1241],{"class":564},"/path/to/file.svg",[537,1243,1238],{"class":543},[537,1245,724],{"class":584},[537,1247,1248],{"class":539,"line":528},[537,1249,607],{"emptyLinePlaceholder":606},[537,1251,1252],{"class":539,"line":529},[537,1253,1254],{"class":1217},"// Inline SVG string\n",[537,1256,1257,1259,1262,1264,1267],{"class":539,"line":530},[537,1258,613],{"class":551},[537,1260,1261],{"class":584}," svgString ",[537,1263,558],{"class":543},[537,1265,1266],{"class":543}," `",[537,1268,1269],{"class":564},"\u003Csvg viewBox=\"0 0 100 100\">\n",[537,1271,1272],{"class":539,"line":531},[537,1273,1274],{"class":564},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[537,1276,1277,1280],{"class":539,"line":727},[537,1278,1279],{"class":564},"\u003C/svg>",[537,1281,1282],{"class":543},"`\n",[537,1284,1285,1287,1289,1291,1293,1295,1297],{"class":539,"line":737},[537,1286,613],{"class":551},[537,1288,581],{"class":543},[537,1290,1227],{"class":584},[537,1292,654],{"class":543},[537,1294,657],{"class":543},[537,1296,585],{"class":660},[537,1298,1299],{"class":584},"(svgString)\n",[514,1301,1303],{"id":1302},"return-values","Return Values",[1305,1306,1307,1324],"table",{},[1308,1309,1310],"thead",{},[1311,1312,1313,1318,1321],"tr",{},[1314,1315,1317],"th",{"align":1316},"left","Name",[1314,1319,1320],{},"Type",[1314,1322,1323],{},"Description",[1325,1326,1327,1343,1357,1371],"tbody",{},[1311,1328,1329,1335,1340],{},[1330,1331,1332],"td",{"align":1316},[490,1333,1334],{},"state",[1330,1336,1337],{},[495,1338,1339],{},"SVGResult",[1330,1341,1342],{},"The loaded SVG state from SVGLoader",[1311,1344,1345,1349,1354],{},[1330,1346,1347],{"align":1316},[490,1348,812],{},[1330,1350,1351],{},[495,1352,1353],{},"SVGLayer[]",[1330,1355,1356],{},"Computed array of processed geometries and materials",[1311,1358,1359,1363,1368],{},[1330,1360,1361],{"align":1316},[490,1362,771],{},[1330,1364,1365],{},[495,1366,1367],{},"boolean",[1330,1369,1370],{},"Whether the SVG is currently loading",[1311,1372,1373,1378,1383],{},[1330,1374,1375],{"align":1316},[490,1376,1377],{},"dispose",[1330,1379,1380],{},[495,1381,1382],{},"() => void",[1330,1384,1385],{},"Function to dispose of all geometries",[514,1387,1389],{"id":1388},"options","Options",[1305,1391,1392,1405],{},[1308,1393,1394],{},[1311,1395,1396,1398,1400,1403],{},[1314,1397,1317],{"align":1316},[1314,1399,1320],{},[1314,1401,1402],{},"Default",[1314,1404,1323],{},[1325,1406,1407,1426,1444,1464,1482],{},[1311,1408,1409,1414,1418,1423],{},[1330,1410,1411],{"align":1316},[490,1412,1413],{},"skipStrokes",[1330,1415,1416],{},[495,1417,1367],{},[1330,1419,1420],{},[495,1421,1422],{},"false",[1330,1424,1425],{},"Whether to skip rendering strokes",[1311,1427,1428,1433,1437,1441],{},[1330,1429,1430],{"align":1316},[490,1431,1432],{},"skipFills",[1330,1434,1435],{},[495,1436,1367],{},[1330,1438,1439],{},[495,1440,1422],{},[1330,1442,1443],{},"Whether to skip rendering fills",[1311,1445,1446,1451,1456,1461],{},[1330,1447,1448],{"align":1316},[490,1449,1450],{},"fillMaterial",[1330,1452,1453],{},[495,1454,1455],{},"MeshBasicMaterialParameters",[1330,1457,1458],{},[495,1459,1460],{},"{}",[1330,1462,1463],{},"Material properties for fill layers",[1311,1465,1466,1471,1475,1479],{},[1330,1467,1468],{"align":1316},[490,1469,1470],{},"strokeMaterial",[1330,1472,1473],{},[495,1474,1455],{},[1330,1476,1477],{},[495,1478,1460],{},[1330,1480,1481],{},"Material properties for stroke layers",[1311,1483,1484,1489,1494,1499],{},[1330,1485,1486],{"align":1316},[490,1487,1488],{},"depth",[1330,1490,1491],{},[495,1492,1493],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[1330,1495,1496],{},[495,1497,1498],{},"'renderOrder'",[1330,1500,1501],{},"How layers should be rendered in 3D space",[514,1503,1505],{"id":1504},"working-with-layers","Working with Layers",[486,1507,509,1508,1510],{},[495,1509,812],{}," computed property returns an array of processed SVG elements, each containing:",[521,1512,1514],{"className":1187,"code":1513,"language":565,"meta":533,"style":533},"interface SVGLayer {\n  geometry: BufferGeometry // Three.js geometry for the layer\n  material: MeshBasicMaterialParameters // Material properties\n  isStroke: boolean // Whether this layer is a stroke or fill\n}\n",[495,1515,1516,1527,1540,1553,1566],{"__ignoreMap":533},[537,1517,1518,1521,1525],{"class":539,"line":540},[537,1519,1520],{"class":551},"interface",[537,1522,1524],{"class":1523},"sBMFI"," SVGLayer",[537,1526,668],{"class":543},[537,1528,1529,1532,1534,1537],{"class":539,"line":527},[537,1530,1531],{"class":547},"  geometry",[537,1533,677],{"class":543},[537,1535,1536],{"class":1523}," BufferGeometry",[537,1538,1539],{"class":1217}," // Three.js geometry for the layer\n",[537,1541,1542,1545,1547,1550],{"class":539,"line":603},[537,1543,1544],{"class":547},"  material",[537,1546,677],{"class":543},[537,1548,1549],{"class":1523}," MeshBasicMaterialParameters",[537,1551,1552],{"class":1217}," // Material properties\n",[537,1554,1555,1558,1560,1563],{"class":539,"line":610},[537,1556,1557],{"class":547},"  isStroke",[537,1559,677],{"class":543},[537,1561,1562],{"class":1523}," boolean",[537,1564,1565],{"class":1217}," // Whether this layer is a stroke or fill\n",[537,1567,1568],{"class":539,"line":528},[537,1569,1570],{"class":543},"}\n",[1572,1573,1575],"h4",{"id":1574},"accessing-individual-layers","Accessing Individual Layers",[521,1577,1580],{"className":523,"code":1578,"highlights":1579,"language":532,"meta":533,"style":533},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/complex-icon.svg')\n\n// Apply different materials based on layer type\nconst getFillColor = (layer: SVGLayer, index: number) => {\n  return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :color=\"getFillColor(layer, index)\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[527,610],[495,1581,1582,1602,1621,1625,1651,1655,1660,1697,1745,1749,1757,1761,1769,1777,1783,1805,1819,1837,1841,1848,1865,1892,1897,1906,1915],{"__ignoreMap":533},[537,1583,1584,1586,1588,1590,1592,1594,1596,1598,1600],{"class":539,"line":540},[537,1585,544],{"class":543},[537,1587,548],{"class":547},[537,1589,552],{"class":551},[537,1591,555],{"class":551},[537,1593,558],{"class":543},[537,1595,561],{"class":543},[537,1597,565],{"class":564},[537,1599,561],{"class":543},[537,1601,570],{"class":543},[537,1603,1605,1607,1609,1611,1613,1615,1617,1619],{"class":1604,"line":527},[539,574],[537,1606,578],{"class":577},[537,1608,581],{"class":543},[537,1610,585],{"class":584},[537,1612,588],{"class":543},[537,1614,591],{"class":577},[537,1616,594],{"class":543},[537,1618,597],{"class":564},[537,1620,600],{"class":543},[537,1622,1623],{"class":539,"line":603},[537,1624,607],{"emptyLinePlaceholder":606},[537,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1647,1649],{"class":1627,"line":610},[539,574],[537,1629,613],{"class":551},[537,1631,581],{"class":543},[537,1633,1227],{"class":584},[537,1635,654],{"class":543},[537,1637,657],{"class":543},[537,1639,585],{"class":660},[537,1641,797],{"class":584},[537,1643,1238],{"class":543},[537,1645,1646],{"class":564},"/complex-icon.svg",[537,1648,1238],{"class":543},[537,1650,724],{"class":584},[537,1652,1653],{"class":539,"line":528},[537,1654,607],{"emptyLinePlaceholder":606},[537,1656,1657],{"class":539,"line":529},[537,1658,1659],{"class":1217},"// Apply different materials based on layer type\n",[537,1661,1662,1664,1667,1669,1672,1675,1677,1679,1681,1684,1686,1689,1692,1695],{"class":539,"line":530},[537,1663,613],{"class":551},[537,1665,1666],{"class":584}," getFillColor ",[537,1668,558],{"class":543},[537,1670,1671],{"class":543}," (",[537,1673,800],{"class":1674},"sHdIc",[537,1676,677],{"class":543},[537,1678,1524],{"class":1523},[537,1680,638],{"class":543},[537,1682,1683],{"class":1674}," index",[537,1685,677],{"class":543},[537,1687,1688],{"class":1523}," number",[537,1690,1691],{"class":543},")",[537,1693,1694],{"class":551}," =>",[537,1696,668],{"class":543},[537,1698,1699,1702,1705,1707,1710,1713,1715,1718,1720,1722,1724,1727,1729,1732,1735,1738,1740,1743],{"class":539,"line":531},[537,1700,1701],{"class":577},"  return",[537,1703,1704],{"class":584}," layer",[537,1706,857],{"class":543},[537,1708,1709],{"class":584},"isStroke",[537,1711,1712],{"class":543}," ?",[537,1714,594],{"class":543},[537,1716,1717],{"class":564},"#000000",[537,1719,1238],{"class":543},[537,1721,1074],{"class":543},[537,1723,1266],{"class":543},[537,1725,1726],{"class":564},"hsl(",[537,1728,835],{"class":543},[537,1730,1731],{"class":584},"index ",[537,1733,1734],{"class":543},"*",[537,1736,1737],{"class":712}," 30",[537,1739,654],{"class":543},[537,1741,1742],{"class":564},", 70%, 50%)",[537,1744,1282],{"class":543},[537,1746,1747],{"class":539,"line":727},[537,1748,1570],{"class":543},[537,1750,1751,1753,1755],{"class":539,"line":737},[537,1752,730],{"class":543},[537,1754,548],{"class":547},[537,1756,570],{"class":543},[537,1758,1759],{"class":539,"line":742},[537,1760,607],{"emptyLinePlaceholder":606},[537,1762,1763,1765,1767],{"class":539,"line":752},[537,1764,544],{"class":543},[537,1766,747],{"class":547},[537,1768,570],{"class":543},[537,1770,1771,1773,1775],{"class":539,"line":778},[537,1772,755],{"class":543},[537,1774,758],{"class":547},[537,1776,570],{"class":543},[537,1778,1779,1781],{"class":539,"line":787},[537,1780,781],{"class":543},[537,1782,784],{"class":547},[537,1784,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803],{"class":539,"line":818},[537,1786,790],{"class":577},[537,1788,558],{"class":543},[537,1790,561],{"class":543},[537,1792,797],{"class":543},[537,1794,800],{"class":584},[537,1796,803],{"class":543},[537,1798,806],{"class":584},[537,1800,809],{"class":543},[537,1802,812],{"class":584},[537,1804,815],{"class":543},[537,1806,1807,1809,1811,1813,1815,1817],{"class":539,"line":843},[537,1808,821],{"class":543},[537,1810,824],{"class":551},[537,1812,558],{"class":543},[537,1814,561],{"class":543},[537,1816,806],{"class":584},[537,1818,815],{"class":543},[537,1820,1821,1823,1825,1827,1829,1831,1833,1835],{"class":539,"line":864},[537,1822,821],{"class":543},[537,1824,848],{"class":551},[537,1826,558],{"class":543},[537,1828,561],{"class":543},[537,1830,800],{"class":584},[537,1832,857],{"class":543},[537,1834,848],{"class":584},[537,1836,815],{"class":543},[537,1838,1839],{"class":539,"line":880},[537,1840,883],{"class":543},[537,1842,1843,1845],{"class":539,"line":886},[537,1844,889],{"class":543},[537,1846,1847],{"class":547},"TresMeshBasicMaterial\n",[537,1849,1850,1853,1855,1857,1859,1861,1863],{"class":539,"line":914},[537,1851,1852],{"class":551},"        v-bind",[537,1854,558],{"class":543},[537,1856,561],{"class":543},[537,1858,800],{"class":584},[537,1860,857],{"class":543},[537,1862,906],{"class":584},[537,1864,815],{"class":543},[537,1866,1867,1870,1873,1875,1877,1880,1882,1884,1886,1888,1890],{"class":539,"line":925},[537,1868,1869],{"class":543},"        :",[537,1871,1872],{"class":551},"color",[537,1874,558],{"class":543},[537,1876,561],{"class":543},[537,1878,1879],{"class":660},"getFillColor",[537,1881,797],{"class":543},[537,1883,800],{"class":584},[537,1885,803],{"class":543},[537,1887,806],{"class":584},[537,1889,1691],{"class":543},[537,1891,815],{"class":543},[537,1893,1894],{"class":539,"line":935},[537,1895,1896],{"class":543},"      />\n",[537,1898,1900,1902,1904],{"class":539,"line":1899},23,[537,1901,917],{"class":543},[537,1903,920],{"class":547},[537,1905,570],{"class":543},[537,1907,1909,1911,1913],{"class":539,"line":1908},24,[537,1910,928],{"class":543},[537,1912,758],{"class":547},[537,1914,570],{"class":543},[537,1916,1918,1920,1922],{"class":539,"line":1917},25,[537,1919,730],{"class":543},[537,1921,747],{"class":547},[537,1923,570],{"class":543},[514,1925,1927],{"id":1926},"depth-handling","Depth Handling",[486,1929,509,1930,1932],{},[495,1931,1488],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[1572,1934,1936,1938],{"id":1935},"renderorder-default",[495,1937,1498],{}," (Default)",[486,1940,1941],{},[490,1942,1943],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[486,1945,1946,1947,1949],{},"This is the default ",[495,1948,1488],{}," option.",[486,1951,1952,1953,1956,1957,1959,1960,1969],{},"This value sets the materials' ",[495,1954,1955],{},"depthWrite"," to ",[495,1958,1422],{}," and increments the mesh layers ",[1961,1962,1966],"a",{"href":1963,"rel":1964},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1965],"nofollow",[495,1967,1968],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[486,1971,1972,1975],{},[490,1973,1974],{},"Disadvantage",": Scene objects may render out of order.",[486,1977,1978,1979,1984,1985,1990],{},"SVG layers with higher ",[1961,1980,1982],{"href":1963,"rel":1981},[1965],[495,1983,1968],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1961,1986,1988],{"href":1963,"rel":1987},[1965],[495,1989,1968],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[521,1992,1994],{"className":1187,"code":1993,"language":565,"meta":533,"style":533},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[495,1995,1996],{"__ignoreMap":533},[537,1997,1998,2000,2002,2004,2006,2008,2010,2012,2014,2017,2019,2021,2023,2026,2028,2030,2032,2034,2036],{"class":539,"line":540},[537,1999,613],{"class":551},[537,2001,581],{"class":543},[537,2003,1227],{"class":584},[537,2005,654],{"class":543},[537,2007,657],{"class":543},[537,2009,585],{"class":660},[537,2011,797],{"class":584},[537,2013,1238],{"class":543},[537,2015,2016],{"class":564},"/icon.svg",[537,2018,1238],{"class":543},[537,2020,638],{"class":543},[537,2022,581],{"class":543},[537,2024,2025],{"class":547}," depth",[537,2027,677],{"class":543},[537,2029,594],{"class":543},[537,2031,1968],{"class":564},[537,2033,1238],{"class":543},[537,2035,588],{"class":543},[537,2037,724],{"class":584},[1572,2039,2040],{"id":2040},"flat",[486,2042,2043],{},[490,2044,2045],{},"Use case: simple SVGs",[486,2047,2048,2049,1956,2055,857],{},"This option sets the materials ",[1961,2050,2053],{"href":2051,"rel":2052},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1965],[495,2054,1955],{},[495,2056,1422],{},[486,2058,2059,2061],{},[490,2060,1974],{},": SVG layers may render out of order.",[486,2063,2064],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[521,2066,2068],{"className":1187,"code":2067,"language":565,"meta":533,"style":533},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[495,2069,2070],{"__ignoreMap":533},[537,2071,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106,2108],{"class":539,"line":540},[537,2073,613],{"class":551},[537,2075,581],{"class":543},[537,2077,1227],{"class":584},[537,2079,654],{"class":543},[537,2081,657],{"class":543},[537,2083,585],{"class":660},[537,2085,797],{"class":584},[537,2087,1238],{"class":543},[537,2089,2016],{"class":564},[537,2091,1238],{"class":543},[537,2093,638],{"class":543},[537,2095,581],{"class":543},[537,2097,2025],{"class":547},[537,2099,677],{"class":543},[537,2101,594],{"class":543},[537,2103,2040],{"class":564},[537,2105,1238],{"class":543},[537,2107,588],{"class":543},[537,2109,724],{"class":584},[1572,2111,2113],{"id":2112},"offsetz","offsetZ",[486,2115,2116],{},[490,2117,2118],{},"Use case: unscaled SVGs seen from the front",[486,2120,2121],{},"When this value is passed, the result is a 3D \"stack\" of mesh layers. A small space is added between each mesh layer in the \"stack\".",[486,2123,2124,2126],{},[490,2125,1974],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[486,2128,2129,2130,2135],{},"When seen from behind, the \"bottom\" of the mesh layer \"stack\" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may ",[1961,2131,2134],{"href":2132,"rel":2133},"https://en.wikipedia.org/wiki/Z-fighting",[1965],"z-fight",", particularly if the SVG is scaled down.",[521,2137,2139],{"className":1187,"code":2138,"language":565,"meta":533,"style":533},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[495,2140,2141],{"__ignoreMap":533},[537,2142,2143,2145,2147,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179],{"class":539,"line":540},[537,2144,613],{"class":551},[537,2146,581],{"class":543},[537,2148,1227],{"class":584},[537,2150,654],{"class":543},[537,2152,657],{"class":543},[537,2154,585],{"class":660},[537,2156,797],{"class":584},[537,2158,1238],{"class":543},[537,2160,2016],{"class":564},[537,2162,1238],{"class":543},[537,2164,638],{"class":543},[537,2166,581],{"class":543},[537,2168,2025],{"class":547},[537,2170,677],{"class":543},[537,2172,594],{"class":543},[537,2174,2113],{"class":564},[537,2176,1238],{"class":543},[537,2178,588],{"class":543},[537,2180,724],{"class":584},[1572,2182,2184],{"id":2183},"number",[495,2185,2183],{},[486,2187,2188],{},[490,2189,2190],{},"Use case: SVGs seen from the front",[486,2192,2193,2194,2197,2198,2202],{},"This is the same as ",[495,2195,2196],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1961,2199,2201],{"href":2132,"rel":2200},[1965],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[486,2204,2205,2207],{},[490,2206,1974],{},": \"Bottom\" of the \"stack\" is visible.",[521,2209,2211],{"className":1187,"code":2210,"language":565,"meta":533,"style":533},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[495,2212,2213],{"__ignoreMap":533},[537,2214,2215,2217,2219,2221,2223,2225,2227,2229,2231,2233,2235,2237,2239,2241,2243,2246,2248],{"class":539,"line":540},[537,2216,613],{"class":551},[537,2218,581],{"class":543},[537,2220,1227],{"class":584},[537,2222,654],{"class":543},[537,2224,657],{"class":543},[537,2226,585],{"class":660},[537,2228,797],{"class":584},[537,2230,1238],{"class":543},[537,2232,2016],{"class":564},[537,2234,1238],{"class":543},[537,2236,638],{"class":543},[537,2238,581],{"class":543},[537,2240,2025],{"class":547},[537,2242,677],{"class":543},[537,2244,2245],{"class":712}," 0.1",[537,2247,588],{"class":543},[537,2249,724],{"class":584},[514,2251,2253],{"id":2252},"memory-management","Memory Management",[486,2255,2256],{},"Always dispose of geometries when the component unmounts:",[521,2258,2260],{"className":523,"code":2259,"language":532,"meta":533,"style":533},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { dispose } = useSVG('/icon.svg')\n\nonUnmounted(() => {\n  dispose()\n})\n\u003C/script>\n",[495,2261,2262,2282,2300,2319,2323,2347,2351,2365,2373,2379],{"__ignoreMap":533},[537,2263,2264,2266,2268,2270,2272,2274,2276,2278,2280],{"class":539,"line":540},[537,2265,544],{"class":543},[537,2267,548],{"class":547},[537,2269,552],{"class":551},[537,2271,555],{"class":551},[537,2273,558],{"class":543},[537,2275,561],{"class":543},[537,2277,565],{"class":564},[537,2279,561],{"class":543},[537,2281,570],{"class":543},[537,2283,2284,2286,2288,2290,2292,2294,2296,2298],{"class":539,"line":527},[537,2285,578],{"class":577},[537,2287,581],{"class":543},[537,2289,585],{"class":584},[537,2291,588],{"class":543},[537,2293,591],{"class":577},[537,2295,594],{"class":543},[537,2297,597],{"class":564},[537,2299,600],{"class":543},[537,2301,2302,2304,2306,2309,2311,2313,2315,2317],{"class":539,"line":603},[537,2303,578],{"class":577},[537,2305,581],{"class":543},[537,2307,2308],{"class":584}," onUnmounted",[537,2310,588],{"class":543},[537,2312,591],{"class":577},[537,2314,594],{"class":543},[537,2316,532],{"class":564},[537,2318,600],{"class":543},[537,2320,2321],{"class":539,"line":610},[537,2322,607],{"emptyLinePlaceholder":606},[537,2324,2325,2327,2329,2331,2333,2335,2337,2339,2341,2343,2345],{"class":539,"line":528},[537,2326,613],{"class":551},[537,2328,581],{"class":543},[537,2330,651],{"class":584},[537,2332,654],{"class":543},[537,2334,657],{"class":543},[537,2336,585],{"class":660},[537,2338,797],{"class":584},[537,2340,1238],{"class":543},[537,2342,2016],{"class":564},[537,2344,1238],{"class":543},[537,2346,724],{"class":584},[537,2348,2349],{"class":539,"line":529},[537,2350,607],{"emptyLinePlaceholder":606},[537,2352,2353,2356,2358,2361,2363],{"class":539,"line":530},[537,2354,2355],{"class":660},"onUnmounted",[537,2357,797],{"class":584},[537,2359,2360],{"class":543},"()",[537,2362,1694],{"class":551},[537,2364,668],{"class":543},[537,2366,2367,2370],{"class":539,"line":531},[537,2368,2369],{"class":660},"  dispose",[537,2371,2372],{"class":547},"()\n",[537,2374,2375,2377],{"class":539,"line":727},[537,2376,654],{"class":543},[537,2378,724],{"class":584},[537,2380,2381,2383,2385],{"class":539,"line":737},[537,2382,730],{"class":543},[537,2384,548],{"class":547},[537,2386,570],{"class":543},[514,2388,2390],{"id":2389},"advanced-usage","Advanced Usage",[1572,2392,2394],{"id":2393},"conditional-layer-rendering","Conditional Layer Rendering",[521,2396,2398],{"className":523,"code":2397,"language":532,"meta":533,"style":533},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { computed } from 'vue'\n\nconst showDetails = ref(true)\nconst { layers } = useSVG('/detailed-icon.svg')\n\nconst visibleLayers = computed(() =>\n  showDetails.value\n    ? layers.value\n    : layers.value.filter(layer => !layer.isStroke)\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in visibleLayers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[495,2399,2400,2420,2438,2457,2461,2480,2505,2509,2527,2537,2548,2581,2585,2593,2597,2605,2613,2619,2642,2656,2674,2678,2700,2708,2716],{"__ignoreMap":533},[537,2401,2402,2404,2406,2408,2410,2412,2414,2416,2418],{"class":539,"line":540},[537,2403,544],{"class":543},[537,2405,548],{"class":547},[537,2407,552],{"class":551},[537,2409,555],{"class":551},[537,2411,558],{"class":543},[537,2413,561],{"class":543},[537,2415,565],{"class":564},[537,2417,561],{"class":543},[537,2419,570],{"class":543},[537,2421,2422,2424,2426,2428,2430,2432,2434,2436],{"class":539,"line":527},[537,2423,578],{"class":577},[537,2425,581],{"class":543},[537,2427,585],{"class":584},[537,2429,588],{"class":543},[537,2431,591],{"class":577},[537,2433,594],{"class":543},[537,2435,597],{"class":564},[537,2437,600],{"class":543},[537,2439,2440,2442,2444,2447,2449,2451,2453,2455],{"class":539,"line":603},[537,2441,578],{"class":577},[537,2443,581],{"class":543},[537,2445,2446],{"class":584}," computed",[537,2448,588],{"class":543},[537,2450,591],{"class":577},[537,2452,594],{"class":543},[537,2454,532],{"class":564},[537,2456,600],{"class":543},[537,2458,2459],{"class":539,"line":610},[537,2460,607],{"emptyLinePlaceholder":606},[537,2462,2463,2465,2468,2470,2473,2475,2478],{"class":539,"line":528},[537,2464,613],{"class":551},[537,2466,2467],{"class":584}," showDetails ",[537,2469,558],{"class":543},[537,2471,2472],{"class":660}," ref",[537,2474,797],{"class":584},[537,2476,2477],{"class":680},"true",[537,2479,724],{"class":584},[537,2481,2482,2484,2486,2488,2490,2492,2494,2496,2498,2501,2503],{"class":539,"line":529},[537,2483,613],{"class":551},[537,2485,581],{"class":543},[537,2487,1227],{"class":584},[537,2489,654],{"class":543},[537,2491,657],{"class":543},[537,2493,585],{"class":660},[537,2495,797],{"class":584},[537,2497,1238],{"class":543},[537,2499,2500],{"class":564},"/detailed-icon.svg",[537,2502,1238],{"class":543},[537,2504,724],{"class":584},[537,2506,2507],{"class":539,"line":530},[537,2508,607],{"emptyLinePlaceholder":606},[537,2510,2511,2513,2516,2518,2520,2522,2524],{"class":539,"line":531},[537,2512,613],{"class":551},[537,2514,2515],{"class":584}," visibleLayers ",[537,2517,558],{"class":543},[537,2519,2446],{"class":660},[537,2521,797],{"class":584},[537,2523,2360],{"class":543},[537,2525,2526],{"class":551}," =>\n",[537,2528,2529,2532,2534],{"class":539,"line":727},[537,2530,2531],{"class":584},"  showDetails",[537,2533,857],{"class":543},[537,2535,2536],{"class":584},"value\n",[537,2538,2539,2542,2544,2546],{"class":539,"line":737},[537,2540,2541],{"class":543},"    ?",[537,2543,641],{"class":584},[537,2545,857],{"class":543},[537,2547,2536],{"class":584},[537,2549,2550,2553,2555,2557,2560,2562,2565,2567,2569,2571,2574,2576,2578],{"class":539,"line":742},[537,2551,2552],{"class":543},"    :",[537,2554,641],{"class":584},[537,2556,857],{"class":543},[537,2558,2559],{"class":584},"value",[537,2561,857],{"class":543},[537,2563,2564],{"class":660},"filter",[537,2566,797],{"class":584},[537,2568,800],{"class":1674},[537,2570,1694],{"class":551},[537,2572,2573],{"class":543}," !",[537,2575,800],{"class":584},[537,2577,857],{"class":543},[537,2579,2580],{"class":584},"isStroke)\n",[537,2582,2583],{"class":539,"line":752},[537,2584,724],{"class":584},[537,2586,2587,2589,2591],{"class":539,"line":778},[537,2588,730],{"class":543},[537,2590,548],{"class":547},[537,2592,570],{"class":543},[537,2594,2595],{"class":539,"line":787},[537,2596,607],{"emptyLinePlaceholder":606},[537,2598,2599,2601,2603],{"class":539,"line":818},[537,2600,544],{"class":543},[537,2602,747],{"class":547},[537,2604,570],{"class":543},[537,2606,2607,2609,2611],{"class":539,"line":843},[537,2608,755],{"class":543},[537,2610,758],{"class":547},[537,2612,570],{"class":543},[537,2614,2615,2617],{"class":539,"line":864},[537,2616,781],{"class":543},[537,2618,784],{"class":547},[537,2620,2621,2623,2625,2627,2629,2631,2633,2635,2637,2640],{"class":539,"line":880},[537,2622,790],{"class":577},[537,2624,558],{"class":543},[537,2626,561],{"class":543},[537,2628,797],{"class":543},[537,2630,800],{"class":584},[537,2632,803],{"class":543},[537,2634,806],{"class":584},[537,2636,809],{"class":543},[537,2638,2639],{"class":584},"visibleLayers",[537,2641,815],{"class":543},[537,2643,2644,2646,2648,2650,2652,2654],{"class":539,"line":886},[537,2645,821],{"class":543},[537,2647,824],{"class":551},[537,2649,558],{"class":543},[537,2651,561],{"class":543},[537,2653,806],{"class":584},[537,2655,815],{"class":543},[537,2657,2658,2660,2662,2664,2666,2668,2670,2672],{"class":539,"line":914},[537,2659,821],{"class":543},[537,2661,848],{"class":551},[537,2663,558],{"class":543},[537,2665,561],{"class":543},[537,2667,800],{"class":584},[537,2669,857],{"class":543},[537,2671,848],{"class":584},[537,2673,815],{"class":543},[537,2675,2676],{"class":539,"line":925},[537,2677,883],{"class":543},[537,2679,2680,2682,2684,2686,2688,2690,2692,2694,2696,2698],{"class":539,"line":935},[537,2681,889],{"class":543},[537,2683,892],{"class":547},[537,2685,895],{"class":551},[537,2687,558],{"class":543},[537,2689,561],{"class":543},[537,2691,800],{"class":584},[537,2693,857],{"class":543},[537,2695,906],{"class":584},[537,2697,561],{"class":543},[537,2699,911],{"class":543},[537,2701,2702,2704,2706],{"class":539,"line":1899},[537,2703,917],{"class":543},[537,2705,920],{"class":547},[537,2707,570],{"class":543},[537,2709,2710,2712,2714],{"class":539,"line":1908},[537,2711,928],{"class":543},[537,2713,758],{"class":547},[537,2715,570],{"class":543},[537,2717,2718,2720,2722],{"class":539,"line":1917},[537,2719,730],{"class":543},[537,2721,747],{"class":547},[537,2723,570],{"class":543},[1572,2725,2727],{"id":2726},"material-customization-per-layer","Material Customization per Layer",[521,2729,2731],{"className":523,"code":2730,"language":532,"meta":533,"style":533},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/logo.svg', {\n  fillMaterial: {\n    transparent: true,\n    opacity: 0.9\n  },\n  strokeMaterial: {\n    transparent: true,\n    opacity: 1.0,\n    color: '#000000'\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :wireframe=\"layer.isStroke\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[495,2732,2733,2753,2771,2775,2802,2810,2821,2831,2836,2845,2855,2866,2879,2884,2890,2898,2902,2910,2918,2924,2946,2960,2978,2982,2988,3004,3024,3029,3038,3047],{"__ignoreMap":533},[537,2734,2735,2737,2739,2741,2743,2745,2747,2749,2751],{"class":539,"line":540},[537,2736,544],{"class":543},[537,2738,548],{"class":547},[537,2740,552],{"class":551},[537,2742,555],{"class":551},[537,2744,558],{"class":543},[537,2746,561],{"class":543},[537,2748,565],{"class":564},[537,2750,561],{"class":543},[537,2752,570],{"class":543},[537,2754,2755,2757,2759,2761,2763,2765,2767,2769],{"class":539,"line":527},[537,2756,578],{"class":577},[537,2758,581],{"class":543},[537,2760,585],{"class":584},[537,2762,588],{"class":543},[537,2764,591],{"class":577},[537,2766,594],{"class":543},[537,2768,597],{"class":564},[537,2770,600],{"class":543},[537,2772,2773],{"class":539,"line":603},[537,2774,607],{"emptyLinePlaceholder":606},[537,2776,2777,2779,2781,2783,2785,2787,2789,2791,2793,2796,2798,2800],{"class":539,"line":610},[537,2778,613],{"class":551},[537,2780,581],{"class":543},[537,2782,1227],{"class":584},[537,2784,654],{"class":543},[537,2786,657],{"class":543},[537,2788,585],{"class":660},[537,2790,797],{"class":584},[537,2792,1238],{"class":543},[537,2794,2795],{"class":564},"/logo.svg",[537,2797,1238],{"class":543},[537,2799,638],{"class":543},[537,2801,668],{"class":543},[537,2803,2804,2806,2808],{"class":539,"line":528},[537,2805,690],{"class":547},[537,2807,677],{"class":543},[537,2809,668],{"class":543},[537,2811,2812,2815,2817,2819],{"class":539,"line":529},[537,2813,2814],{"class":547},"    transparent",[537,2816,677],{"class":543},[537,2818,702],{"class":680},[537,2820,684],{"class":543},[537,2822,2823,2826,2828],{"class":539,"line":530},[537,2824,2825],{"class":547},"    opacity",[537,2827,677],{"class":543},[537,2829,2830],{"class":712}," 0.9\n",[537,2832,2833],{"class":539,"line":531},[537,2834,2835],{"class":543},"  },\n",[537,2837,2838,2841,2843],{"class":539,"line":727},[537,2839,2840],{"class":547},"  strokeMaterial",[537,2842,677],{"class":543},[537,2844,668],{"class":543},[537,2846,2847,2849,2851,2853],{"class":539,"line":737},[537,2848,2814],{"class":547},[537,2850,677],{"class":543},[537,2852,702],{"class":680},[537,2854,684],{"class":543},[537,2856,2857,2859,2861,2864],{"class":539,"line":742},[537,2858,2825],{"class":547},[537,2860,677],{"class":543},[537,2862,2863],{"class":712}," 1.0",[537,2865,684],{"class":543},[537,2867,2868,2871,2873,2875,2877],{"class":539,"line":752},[537,2869,2870],{"class":547},"    color",[537,2872,677],{"class":543},[537,2874,594],{"class":543},[537,2876,1717],{"class":564},[537,2878,600],{"class":543},[537,2880,2881],{"class":539,"line":778},[537,2882,2883],{"class":543},"  }\n",[537,2885,2886,2888],{"class":539,"line":787},[537,2887,654],{"class":543},[537,2889,724],{"class":584},[537,2891,2892,2894,2896],{"class":539,"line":818},[537,2893,730],{"class":543},[537,2895,548],{"class":547},[537,2897,570],{"class":543},[537,2899,2900],{"class":539,"line":843},[537,2901,607],{"emptyLinePlaceholder":606},[537,2903,2904,2906,2908],{"class":539,"line":864},[537,2905,544],{"class":543},[537,2907,747],{"class":547},[537,2909,570],{"class":543},[537,2911,2912,2914,2916],{"class":539,"line":880},[537,2913,755],{"class":543},[537,2915,758],{"class":547},[537,2917,570],{"class":543},[537,2919,2920,2922],{"class":539,"line":886},[537,2921,781],{"class":543},[537,2923,784],{"class":547},[537,2925,2926,2928,2930,2932,2934,2936,2938,2940,2942,2944],{"class":539,"line":914},[537,2927,790],{"class":577},[537,2929,558],{"class":543},[537,2931,561],{"class":543},[537,2933,797],{"class":543},[537,2935,800],{"class":584},[537,2937,803],{"class":543},[537,2939,806],{"class":584},[537,2941,809],{"class":543},[537,2943,812],{"class":584},[537,2945,815],{"class":543},[537,2947,2948,2950,2952,2954,2956,2958],{"class":539,"line":925},[537,2949,821],{"class":543},[537,2951,824],{"class":551},[537,2953,558],{"class":543},[537,2955,561],{"class":543},[537,2957,806],{"class":584},[537,2959,815],{"class":543},[537,2961,2962,2964,2966,2968,2970,2972,2974,2976],{"class":539,"line":935},[537,2963,821],{"class":543},[537,2965,848],{"class":551},[537,2967,558],{"class":543},[537,2969,561],{"class":543},[537,2971,800],{"class":584},[537,2973,857],{"class":543},[537,2975,848],{"class":584},[537,2977,815],{"class":543},[537,2979,2980],{"class":539,"line":1899},[537,2981,883],{"class":543},[537,2983,2984,2986],{"class":539,"line":1908},[537,2985,889],{"class":543},[537,2987,1847],{"class":547},[537,2989,2990,2992,2994,2996,2998,3000,3002],{"class":539,"line":1917},[537,2991,1852],{"class":551},[537,2993,558],{"class":543},[537,2995,561],{"class":543},[537,2997,800],{"class":584},[537,2999,857],{"class":543},[537,3001,906],{"class":584},[537,3003,815],{"class":543},[537,3005,3007,3009,3012,3014,3016,3018,3020,3022],{"class":539,"line":3006},26,[537,3008,1869],{"class":543},[537,3010,3011],{"class":551},"wireframe",[537,3013,558],{"class":543},[537,3015,561],{"class":543},[537,3017,800],{"class":584},[537,3019,857],{"class":543},[537,3021,1709],{"class":584},[537,3023,815],{"class":543},[537,3025,3027],{"class":539,"line":3026},27,[537,3028,1896],{"class":543},[537,3030,3032,3034,3036],{"class":539,"line":3031},28,[537,3033,917],{"class":543},[537,3035,920],{"class":547},[537,3037,570],{"class":543},[537,3039,3041,3043,3045],{"class":539,"line":3040},29,[537,3042,928],{"class":543},[537,3044,758],{"class":547},[537,3046,570],{"class":543},[537,3048,3050,3052,3054],{"class":539,"line":3049},30,[537,3051,730],{"class":543},[537,3053,747],{"class":547},[537,3055,570],{"class":543},[503,3057,3059],{"id":3058},"usesvg-component","UseSVG Component",[486,3061,3062,3063,3066],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[495,3064,3065],{},"UseSVG"," component:",[521,3068,3070],{"className":523,"code":3069,"language":532,"meta":533,"style":533},"\u003Cscript setup lang=\"ts\">\nimport { UseSVG } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup :scale=\"0.01\" :position=\"[-2.1, 1, 0]\">\n    \u003CUseSVG\n      src=\"/path/to/logo.svg\"\n      :skip-fills=\"false\"\n      :fill-material=\"{ transparent: true,\n                        opacity: 0.8 }\"\n      depth=\"renderOrder\"\n    />\n  \u003C/TresGroup>\n\u003C/template>\n",[495,3071,3072,3092,3111,3119,3123,3131,3180,3187,3201,3216,3240,3254,3267,3272,3280],{"__ignoreMap":533},[537,3073,3074,3076,3078,3080,3082,3084,3086,3088,3090],{"class":539,"line":540},[537,3075,544],{"class":543},[537,3077,548],{"class":547},[537,3079,552],{"class":551},[537,3081,555],{"class":551},[537,3083,558],{"class":543},[537,3085,561],{"class":543},[537,3087,565],{"class":564},[537,3089,561],{"class":543},[537,3091,570],{"class":543},[537,3093,3094,3096,3098,3101,3103,3105,3107,3109],{"class":539,"line":527},[537,3095,578],{"class":577},[537,3097,581],{"class":543},[537,3099,3100],{"class":584}," UseSVG",[537,3102,588],{"class":543},[537,3104,591],{"class":577},[537,3106,594],{"class":543},[537,3108,597],{"class":564},[537,3110,600],{"class":543},[537,3112,3113,3115,3117],{"class":539,"line":603},[537,3114,730],{"class":543},[537,3116,548],{"class":547},[537,3118,570],{"class":543},[537,3120,3121],{"class":539,"line":610},[537,3122,607],{"emptyLinePlaceholder":606},[537,3124,3125,3127,3129],{"class":539,"line":528},[537,3126,544],{"class":543},[537,3128,747],{"class":547},[537,3130,570],{"class":543},[537,3132,3133,3135,3137,3139,3142,3144,3146,3149,3151,3153,3155,3157,3159,3162,3165,3167,3170,3172,3174,3176,3178],{"class":539,"line":529},[537,3134,755],{"class":543},[537,3136,758],{"class":547},[537,3138,1074],{"class":543},[537,3140,3141],{"class":551},"scale",[537,3143,558],{"class":543},[537,3145,561],{"class":543},[537,3147,3148],{"class":712},"0.01",[537,3150,561],{"class":543},[537,3152,1074],{"class":543},[537,3154,1077],{"class":551},[537,3156,558],{"class":543},[537,3158,561],{"class":543},[537,3160,3161],{"class":543},"[-",[537,3163,3164],{"class":712},"2.1",[537,3166,803],{"class":543},[537,3168,3169],{"class":712},"1",[537,3171,803],{"class":543},[537,3173,1087],{"class":712},[537,3175,1100],{"class":543},[537,3177,561],{"class":543},[537,3179,570],{"class":543},[537,3181,3182,3184],{"class":539,"line":530},[537,3183,781],{"class":543},[537,3185,3186],{"class":547},"UseSVG\n",[537,3188,3189,3192,3194,3196,3199],{"class":539,"line":531},[537,3190,3191],{"class":551},"      src",[537,3193,558],{"class":543},[537,3195,561],{"class":543},[537,3197,3198],{"class":564},"/path/to/logo.svg",[537,3200,815],{"class":543},[537,3202,3203,3205,3208,3210,3212,3214],{"class":539,"line":727},[537,3204,821],{"class":543},[537,3206,3207],{"class":551},"skip-fills",[537,3209,558],{"class":543},[537,3211,561],{"class":543},[537,3213,1422],{"class":680},[537,3215,815],{"class":543},[537,3217,3218,3220,3223,3225,3227,3230,3233,3236,3238],{"class":539,"line":737},[537,3219,821],{"class":543},[537,3221,3222],{"class":551},"fill-material",[537,3224,558],{"class":543},[537,3226,561],{"class":543},[537,3228,3229],{"class":543},"{ ",[537,3231,3232],{"class":547},"transparent",[537,3234,3235],{"class":543},": ",[537,3237,2477],{"class":680},[537,3239,684],{"class":543},[537,3241,3242,3245,3247,3250,3252],{"class":539,"line":742},[537,3243,3244],{"class":547},"                        opacity",[537,3246,3235],{"class":543},[537,3248,3249],{"class":712},"0.8",[537,3251,588],{"class":543},[537,3253,815],{"class":543},[537,3255,3256,3259,3261,3263,3265],{"class":539,"line":752},[537,3257,3258],{"class":551},"      depth",[537,3260,558],{"class":543},[537,3262,561],{"class":543},[537,3264,1968],{"class":564},[537,3266,815],{"class":543},[537,3268,3269],{"class":539,"line":778},[537,3270,3271],{"class":543},"    />\n",[537,3273,3274,3276,3278],{"class":539,"line":787},[537,3275,928],{"class":543},[537,3277,758],{"class":547},[537,3279,570],{"class":543},[537,3281,3282,3284,3286],{"class":539,"line":818},[537,3283,730],{"class":543},[537,3285,747],{"class":547},[537,3287,570],{"class":543},[514,3289,3291],{"id":3290},"props","Props",[1305,3293,3294,3307],{},[1308,3295,3296],{},[1311,3297,3298,3301,3303,3305],{},[1314,3299,3300],{"align":1316},"Prop",[1314,3302,1320],{},[1314,3304,1323],{"align":1316},[1314,3306,1402],{},[1325,3308,3309,3331,3351,3370,3388,3405,3424,3442],{},[1311,3310,3311,3316,3321,3329],{},[1330,3312,3313],{"align":1316},[490,3314,3315],{},"src",[1330,3317,3318],{},[495,3319,3320],{},"string",[1330,3322,3323,3324,3328],{"align":1316},"Either a path to an SVG ",[3325,3326,3327],"em",{},"or"," an SVG string",[1330,3330],{},[1311,3332,3333,3337,3341,3347],{},[1330,3334,3335],{"align":1316},[490,3336,1413],{},[1330,3338,3339],{},[495,3340,1367],{},[1330,3342,3343,3344,3346],{"align":1316},"If ",[495,3345,2477],{},", the SVG strokes will not be rendered.",[1330,3348,3349],{},[495,3350,1422],{},[1311,3352,3353,3357,3361,3366],{},[1330,3354,3355],{"align":1316},[490,3356,1432],{},[1330,3358,3359],{},[495,3360,1367],{},[1330,3362,3343,3363,3365],{"align":1316},[495,3364,2477],{},", the SVG fills will not be rendered.",[1330,3367,3368],{},[495,3369,1422],{},[1311,3371,3372,3376,3380,3383],{},[1330,3373,3374],{"align":1316},[490,3375,1470],{},[1330,3377,3378],{},[495,3379,1455],{},[1330,3381,3382],{"align":1316},"Props to assign to the stroke materials of the resulting meshes.",[1330,3384,3385],{},[495,3386,3387],{},"undefined",[1311,3389,3390,3394,3398,3401],{},[1330,3391,3392],{"align":1316},[490,3393,1450],{},[1330,3395,3396],{},[495,3397,1455],{},[1330,3399,3400],{"align":1316},"Props to assign to the fill materials of the resulting meshes.",[1330,3402,3403],{},[495,3404,3387],{},[1311,3406,3407,3412,3417,3420],{},[1330,3408,3409],{"align":1316},[490,3410,3411],{},"strokeMeshProps",[1330,3413,3414],{},[495,3415,3416],{},"TresOptions",[1330,3418,3419],{"align":1316},"Props to assign to the resulting stroke meshes.",[1330,3421,3422],{},[495,3423,3387],{},[1311,3425,3426,3431,3435,3438],{},[1330,3427,3428],{"align":1316},[490,3429,3430],{},"fillMeshProps",[1330,3432,3433],{},[495,3434,3416],{},[1330,3436,3437],{"align":1316},"Props to assign to the resulting fill meshes.",[1330,3439,3440],{},[495,3441,3387],{},[1311,3443,3444,3448,3452,3459],{},[1330,3445,3446],{"align":1316},[490,3447,1488],{},[1330,3449,3450],{},[495,3451,1493],{},[1330,3453,3454,3455,1691],{"align":1316},"Specify how SVG layers are to be rendered. (",[1961,3456,3458],{"href":3457},"#depth-handling","See \"Depth\"",[1330,3460,3461],{},[495,3462,1968],{},[503,3464,3466],{"id":3465},"troubleshooting","Troubleshooting",[3468,3469,3471],"alert",{"type":3470},"warning",[486,3472,3473],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[486,3475,3476],{},"Here are some things to try if you run into problems:",[514,3478,3480],{"id":3479},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[1163,3482,3483],{},[1166,3484,3485,3486,1956,3489,857],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[495,3487,3488],{},"#ff0000",[495,3490,3491],{},"rgb(255, 0, 0)",[514,3493,3495],{"id":3494},"parts-of-the-svg-render-in-the-wrong-order-or-disappear-depending-on-viewing-angle","Parts of the SVG render in the wrong order or disappear, depending on viewing angle",[1163,3497,3498,3510],{},[1166,3499,3500,3501,3503,3504,857],{},"In your ",[495,3502,145],{}," options, ",[1961,3505,3506,3507,3509],{"href":3457},"change the ",[495,3508,1488],{}," option",[1166,3511,3512,3513,3516,3517,857],{},"In the SVG source, use ",[495,3514,3515],{},"fill=\"none\""," rather than ",[495,3518,3519],{},"fill-opacity=\"0\"",[514,3521,3523,3524],{"id":3522},"parts-of-the-svg-z-fight","Parts of the SVG ",[1961,3525,3527],{"href":2132,"rel":3526},[1965],"\"z-fight\"",[1163,3529,3530,3538],{},[1166,3531,3500,3532,3503,3534,857],{},[495,3533,145],{},[1961,3535,3506,3536,3509],{"href":3457},[495,3537,1488],{},[1166,3539,3540],{},"Increase the distance between the SVG and other on-screen elements.",[514,3542,3544],{"id":3543},"the-svg-is-not-visible","The SVG is not visible",[1163,3546,3547,3550,3559,3565],{},[1166,3548,3549],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[1166,3551,3552,3553,3555,3556,857],{},"Try scaling the SVG down, e.g., wrap it in a ",[495,3554,758],{}," with ",[495,3557,3558],{},":scale=\"0.01\"",[1166,3560,3561,3562,857],{},"Try moving the SVG up (+y), e.g., ",[495,3563,3564],{},":position=\"[0,2,0]\"",[1166,3566,3567,3568,3571],{},"Check that ",[495,3569,3570],{},"layers.length > 0"," before rendering.",[514,3573,3575],{"id":3574},"performance-issues-with-many-layers","Performance issues with many layers",[1163,3577,3578,3585,3594],{},[1166,3579,3580,3581,3584],{},"Use the ",[495,3582,3583],{},"dispose()"," function when components unmount to clean up geometries.",[1166,3586,3587,3588,3590,3591,3593],{},"Consider using ",[495,3589,1413],{}," or ",[495,3592,1432],{}," to reduce the number of rendered layers.",[1166,3595,3596],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[503,3598,3600,3601,3603,3604,3606],{"id":3599},"when-to-use-usesvg-vs-svg-component","When to Use ",[495,3602,145],{}," vs ",[495,3605,500],{}," Component",[486,3608,3609],{},[490,3610,3611,3612,3614],{},"Use ",[495,3613,145],{}," when you need:",[1163,3616,3617,3620,3623,3626,3629],{},[1166,3618,3619],{},"Direct access to individual SVG layers",[1166,3621,3622],{},"Custom rendering logic",[1166,3624,3625],{},"Layer-specific animations",[1166,3627,3628],{},"Programmatic geometry manipulation",[1166,3630,3631],{},"Advanced material customization per layer",[486,3633,3634],{},[490,3635,3580,3636,3638],{},[495,3637,500],{}," component when you need:",[1163,3640,3641,3644,3647,3650],{},[1166,3642,3643],{},"Simple, declarative SVG rendering",[1166,3645,3646],{},"Quick prototyping",[1166,3648,3649],{},"Standard SVG display without custom logic",[1166,3651,3652],{},"Less code and setup",[3654,3655,3656],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":533,"searchDepth":540,"depth":527,"links":3658},[3659,3669,3672,3680],{"id":505,"depth":527,"text":506,"children":3660},[3661,3662,3663,3664,3665,3666,3667,3668],{"id":516,"depth":603,"text":15},{"id":1180,"depth":603,"text":1181},{"id":1302,"depth":603,"text":1303},{"id":1388,"depth":603,"text":1389},{"id":1504,"depth":603,"text":1505},{"id":1926,"depth":603,"text":1927},{"id":2252,"depth":603,"text":2253},{"id":2389,"depth":603,"text":2390},{"id":3058,"depth":527,"text":3059,"children":3670},[3671],{"id":3290,"depth":603,"text":3291},{"id":3465,"depth":527,"text":3466,"children":3673},[3674,3675,3676,3678,3679],{"id":3479,"depth":603,"text":3480},{"id":3494,"depth":603,"text":3495},{"id":3522,"depth":603,"text":3677},"Parts of the SVG \"z-fight\"",{"id":3543,"depth":603,"text":3544},{"id":3574,"depth":603,"text":3575},{"id":3599,"depth":527,"text":3681},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.","md",null,{},{"title":145,"description":3682},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",[3689,3691],{"title":141,"path":142,"stem":143,"description":3690,"children":-1},"A composable to load multiple textures efficiently in TresJS scenes.",{"title":149,"path":150,"stem":151,"description":3692,"children":-1},"A composable to track loading progress of assets in TresJS scenes.",1781273437782]