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