Provide details SVG supports to F7 core version pages

F7 core version why svg code shows error while put in page-content? <svg xmlns=“” xmlns:xlink=“” class=“bg-1-splash” viewBox=“0 0 160.46 151.813” >

Error: Uncaught (in promise) Error: NamespaceError: Failed to execute ‘setAttributeNS’ on ‘Element’: ‘’ is an invalid namespace for attributes.

in template component

even page item if I put more svg codes, rest of the page code automatically disappearing from rendering in browser.

Anyone please help me: how to use 3 to 4 random shapes codes in single page?.


Just remove xmlns:xlink=“” attribute

Tried that also, it renders but removed other DOM from rendering. However without svg those are rendering. Looks like limited DOM element are rendering on page. Out of 3 I keep 2, More html elements visible. if I kept 1, even more.

post the full code of the template

<div class=“swiper-container introswiper”>
<div class=“swiper-wrapper”>
<div class=“swiper-slide”>
<div class=“row h-100”>
<div class=“col-100 no-padding-horizontal align-self-center”>
<div class=“row “>
<div class=“col-ld-6 position-relative”>
<svg xmlns=“SVG namespace” width=“416.289” height=“308.987”
viewBox=“0 0 416.289 308.987” class=“slidebg”>
<linearGradient id=“linear-gradient2” x1=“0.5” x2=“0.5” y2=“1”
<stop offset=“0” stop-color=”#09b2fd” />
<stop offset=“1” stop-color="#6b00e5" />
<path id=“introbg” d=“M868.854,286.227c-42.079,2.312-57.319,10.695-91.165,40.694S736.92,433.075,681.535,431.536,640.766,400,563.844,372.306,494.285,294.077,528.9,247.154s5.917-85.116,48.7-111.97S700.5,179.79,765.381,166.922s94.687-61.032,121.507-38.374,8.786,43,12.947,68.436,20.346,34.68,20.346,55.951S910.933,283.915,868.854,286.227Z”
transform=“translate(-503.892 -122.573)” fill=“url(#linear-gradient2)” />
<div class=“text”>Budget</div>
<div class=“circle small one”></div>
<div class=“circle two”></div>
<div class=“circle small three”></div>
<img src=“img/introimg.png” alt="" class=“slideimg” />
<div class=“col-80 medium-65 large-50 margin-left-auto margin-right-auto”>
<h1 class=“margin-bottom”><span
class=“text-secondary fw-light”>Create<br />Finance</span><br />Goal
<p class=“text-secondary”>Great interface to access small details from
components, Easy to use and Easy to develop.</p>
<div class=“swiper-pagination pagination-rightnumber”></div>

Similar swiper carousel with same slides svg code 3 slides.
could render 1 slide but for more it stops rendering pagination divs and other slides content. Also without svg it works fine.

I can’t see any issues:

Ohh! Let me see hosting somewhere else.
May be server limitation possible or config issue. I am using visual code.

Thank you so much!