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