Issue with Rendering SVGs Using xlink:href

[lucaspelloni2]

Description

Description

We are experiencing an issue where SVGs using xlink:href for referencing internal SVG elements like images or patterns are not rendering with React Native Skia

Version

1.0.4

Steps to reproduce

Implement the SVG rendering with the following React component

Snack, code example, screenshot, or link to a repository

import {Canvas, ImageSVG, Skia} from '@shopify/react-native-skia';

const inlineSvg = Skia.SVG.MakeFromString(`
<svg width="32" height="56" viewBox="0 0 32 56" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="32" height="32" fill="url(#pattern0_2472_986)"/>
<circle cx="16" cy="40" r="16" fill="url(#pattern1_2472_986)"/>
<defs>
<pattern id="pattern0_2472_986" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_2472_986" transform="scale(0.0078125)"/>
</pattern>
<pattern id="pattern1_2472_986" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image1_2472_986" transform="scale(0.0078125)"/>
</pattern>
<image id="image0_2472_986" width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAqFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////9Mof9bqv9Vpv90t//e7v9irf/w+P+r1P+Ev//4/P/S6P/F4v+02P+Xyf+Rxv9osP/m8//1+v+l0P+Mw/+62/+/3v97uv/q9P9tsv/K5P+ezf/X6/9ZyTQVAAAAG3RSTlMAxOwF3IY2DfrTua6pikpCPRwf88y7lXx0XhXr7ECqAAAF8UlEQVR42ryYaXeaQBiFBwRZXKNxyx3UuCZRk1az/P9/1va0ZIgg3BdJn4+eow7v8txRVQqvPnGboRU4tu/bTmCFTXdS99R/wWu3LBuZ2Far/b2nqHVcy0cuvuV2aup7qA9tUNjDuqqc3siBAGfUq/bhGxDTqK4M3RClCLuqCjoWSmN11LXcNHAVjZvr9m7cx5X0x7Urmh+gAoJu2cd3URFurVT3LVSGVWIS2jYqxG4rIS1UTEvW/iYqpykYBG8AkuX0HSwDOqrvbkGy1Vo/gOX2jgw+ByTzqf7NBixOj3p+BySLe/2HaM+fgKiBdwuWo/7L65rvglc4/wOwPOqYFWgGRbvA798PbXgGTbMq/2x0ki1QiZHaYDlFOsl0Dpp2Tv7Q/l+/6q/cL8BiX0ymmgWWlT5nBhrr0iC6YHnWaZ5A46pMuuANnMUDaLqZDQhAG9i0/nGnYwRODrKaMAZv4JjdAeuZjhE4eZyxAX2QHBPfaM4jc3I/vQkNiA2sN6YjUic31BkdyA28NDMpd3JHfcWC2MBPZitLONlKraDUwLOUl4yT5asYig083cNweJU7OVQJ6hAbeIkk+0ju5Lp8BZaJ8Lk8G4/yReiBYpvn3Qe5k80VdSQ1sI7SynkSO3mkYhzSwPllTjj5BAZHNoJHnSC9bHInmzEckgY2RMhA7uThvxy2SQMbXpCB3Ml2jY6BD+LuIXSyCQSXNTAx5kInuyaHZHfgi7o97Fgnm0TyfBTxos9AmrSTjyjE96gfI0tNHkDu5Dbza+xNsweQO7lFjMDCFLVgBtJOnjNDYNMRzH7wzBix0ARKebSBIlPcn0RqcD7yioJgb/T6djLXQTo354VxMGEjaAlEJgvYm8MO+UyUSzZg9cUHWzq6lkUubCKPz25GC3Mc4uJ3MG88II+mCgsLYMZuockxBDbkHIb5GtiZBpw5OVqwTYjW+SIIqMfYmxdI0y+mVLEC5TAOWqUdo9+LSkDNi5MnwrWO+fjccP7Pwb2OOeWq0Ce2eZZMZroGKyaT/F/Vm92SmkAQhdUqL7JJdr3ci/kBRkRBVtE1vv+b5W4pRufrttYUpB8AhqF/zzkNB+hf1iVK07pUBcIJD7BQJIEihZA2mGmdonovwAmLr9cARBc0afxKTvhDdoHdbb3v7XMjd1JbCsO5jEZeuEOoi1RRVBTP+exF9sF9HJ7RCewx8QSFF77MfsmNTZtIMr35M3phTsVoKQeBolF2FZYSKMfQkFg6/8bGWHUJdwgNCbRkDnN5sY5/Q5HOhW26JYOmVComXXQJeZY8QAFNaToVOqmtayNfdBvRjWNb0GBiZR++fiJzlIs+MKfRrFENYm6QEbK7d+hwNHsV88Aey74fnKCI+wm+w1cazw+JVIwEkr8Hq5xgPAcnCNrmq3JRlxKfbMeQ+VLRELFl9i5848VquESQ6gzTOJyg+YpSI/YDbwzT5fAFcIIQAxsOYDoEKmv4B4DMuDZu6gGoRKi2giGbkJkQdfABoFoEq0sH3wCDfB418GcAqxmuP8AVIJQxcOETwfVMWGzgIYQJ1IPDH5GwYMqmgXEcwtb2/gPT8U8FadUBL0x4WlZYtQsybTfgqfWQ/nEdBaVE281W8Ex1JBR9HChm6BVTtwAI4DAYW15iHZLJ6wzmQDqtWMrftPT9H9PboXwQ1jcHYC21AgZPrTcPTCZvQcAQ27tMQRhjr4iTq0HtdxKxMF+wa/W/4AgiFpLxMGVnQ0n1SOW0KxIyyaOo/biXFouPaFLaEVnGUi6ZNfIhG0ZruAnBHUi5QMwGfyEy5+uw7apuG2p/JwOFx8VsyKBdrHnEXKeU8+kFjWdv2LTw3W+lpJNzIltdAibzDVFrRpfAwB2LWvWy3i43ktkty3q/K2zuGkOWb0sWNj9B2r2pnUnY+iJJu58jbi+rurn99rprRXH7E+X95yrUvrHOONv4Q6j2Gnn//7PgMP6KxwSWXMZf8xl/0Wn8Va8JLLuNv+43gYXHCax8TmDpdQJrvxNYfJ7C6vcElt//xfr/X40iZ+WA+zWeAAAAAElFTkSuQmCC"/>
<image id="image1_2472_986" width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAA81BMVEUAAAAndso8luIndsondsondsoodssqd8wodsondcoodsopd8ond8wrecsnds4tfcwshdMreMwodcoodsoodskodskndsondsoodcopdskpd8ondcspdcspd8sndcn///8reMr5+/3d6fY8g84wesvz9/zh7PeRueQ2f838/f6zz+zl7vjO4POXveVWk9X2+fxbltbu9Pvs8/pChtAyfMzZ5/XI3PFvo9tRkNTD2fCnx+mFseB8q95poNrW5fVMjdJfmdeJs+HL3vKArt/T4/RHidG91e+dwOeMtuLp8fm50u52p93G2vCkxeiwzeuryepknNiapjyiAAAAHnRSTlMA6wTGwaeENdjSuEdAOxoRCx36+fLftqyUioN6cV5dkjFrAAAHVklEQVR42ryY6VbiQBCFE1ZZFMd9rQoghNWIKCI7zgi4v//bzBkPnYSkqklCnO8v5ySVrlv3VqMEIpe8TMTT0dShur+vHqai6XjiMplT/gu7mdOYCiRq7DSzq/wkkexZdA+k7EXPshHlZ0ieqOAJ9SSphM6v8y3wwdb5r3A//hh8cxzeMWwfQSCOtpUwyMYgMLGssik7cdiI+M5mc3dxABtycBHZoPkpCIFUUClEEhASiUig7scgNGIBlJBRIUTUjOKTBIRMwl/74xA68YiPyE3DD5D2HNW5KPwI0ZzH4JPm3kR/A5b227U0Iz1FZE7y/nazjogfwDDMIxYWRUkFOQ/958//+rWK/zCAoYz/qNa6fBfW6iCSZl/fQQEwoOCR7UR63SzEucOvoUkJGFpo8sk1Ih7IfzQ9jxZPwPCOFoauBXCkDJCMR2jngRUh2vkzBpKMJH9o/+/n0c4XsHygnXyfzoUdVoBk/mk9tNP6DRJ+t9BOTyOzMeJHAHePaON2egVS7vSVEh7vfMhgm1T/PfN6voSFvYT7NhBskw1IUcN/a2vp4go8cWWfmRfKlVJUEy6o9xtoMhqDZ8a2czNuwM0FMQEHxPlb319tauADbV61ZPtM7Mo7XiywUkBBnfHWSbM5AZKbOgoKFQ+GmCW+4smSEmOsXxJfKFpteCJOz3lnIizgEwWNCpC84TfMglBpWMlAmMHaEdStYebUP8NvZtw0WNmgrxvFI3cPTRW9svIrLHvMSnGGAvcoHCk2ku7qy2amaBC0AND+4JKy+xSTisUxOOmZ7leE4AVAUQwysccd29ZQcNIVDcjfgK8C+E66HdFaUc/BiTmBfPY9D76MZZG1Kb8M9/k15lwRuPbgB1xSA5pKf4Qr1Jtcq17ZPWaLl6CwQIN+qtYvoQtjfkXLwBCGyMrwhD2ABTARTVLoAoXOHsHJModVcCCGp6yRumohQ4lUrFYXAw0O1AgdAxNcMiSjtoQsRle6q07oQDgDB+IK0CHlV0eLfPm9U7AXVCZXsAYn6bPvAqLOncqQrd9zS/jT9tI05tbe0AQBoSnDWV70+zK4B6sMhAdqlKbNbWtu+7kyM2VQoVQgVDOAVfZ2qcvIo+xjpma+MTeCgezY3qlLyqkzhsQ3tmXtHDk/8l5kN+maQjNOqzglVpGh7EkgrL3vSo9l3fdA0RFzRawlqjsH+RSo8Pn+YIjWSBKh53QCRcmBgxGVXoIxLrkm9Nn/6PWY9azLdA5yriDQ8rI/AdpsSsrRRHBqrji4dN5FpBK4M31fA1+8Myd3qSQYF9CBpM5uinJ0ZkoTrgtJk1aZ4MvKviH4YMKYS1xJM0FQ5B8kKOjP4JUiEwdpJUo7TR4YntBO/XMwBje8gTRcaZAi/+vDMrjg0rg1W3RhLXX6uSnlEFZ5EcsDx7CKblq1oUuUpL28wCqHLiMsiR2WZUJvJLfNCkho0PaiKvuwSl7YAE97xmxkUw1YOrS29v9Wby27aQNRdFN1U3XdXe74QfETDAFCqOPWNaQONMj//zWVKnnGSeZcuETIztkimdE87uOcc/ECODQrsmIViBeAj4DHLi3IgtiTHgF7CXl4h41Lr5GgU1iCSyh4hjYED2kSUhel8BkKAhHC4m7vdB6DLwxEOBQL4G1I40EWiqXJ6HRweBYmI5yOZWj0UxSmY1yQCPGb2KoUFSRvS7KQ12WUUnzJEXMlWfimJMNFqTXN/icGRpHHFL6FrCiVleW+ozkv2P3ci8pyYWOipuBDJoLRH1FjIm3NdB68g2RUI23NvlgqaNic5jr1Hl71RU77gxI1p7b2vGq1Dsun1BO1iDo7FJhIOOba88rSnlsICocJqhUZJD+ynX8T/Mw7uWC2YAgKx0pQYIrmL2LIMcIGxChA0UCSCt+noCAGpZCkAjRdwTWAi4QQnJyl6QpA0zFEZYmUbCvcTEpUaqoWBZWRZ29OotBSlleKp2q/Y8UAk9VHVJnXLw9iFDVKTlYzdH1iSC+EIGsp6/lhd3Oark8AXQ8EC32vTAKH4X95lmAxgYIFL9k8ee9ZgDfHroNvvGgVY9URLwCLVvECXEEs25mgry5dgNqTjkFItsPCZUotHhXfbq2QcHnPcdhfT0q3kek59f5Zs+wYS7dYevokEq+3gb0ninV9xorXCRCvBfI9kIOCjes+27dnEhsVg5HveQPDbmby7FhmYEhDEyVZAwNv4cimpLGF4Y53Pjm/gIVDbGKZlueaWGqHNGYTYGK5mo3HL+dk4PI2HrmRqfYFf49Io8/Xs3LlM+riyFq5rm9mq4GZTW7n215i51uusZ1Pbmicdg8Wc4EGTsoZGuWWTu/YuQZnWDr3t8jSebmpVT8HyKCZPcoEplZk68XFsOFA7CTn40Rg65UZm73a5QrVQ0gUp7cSY7Pc2r3O10wOqNq9B9buj2Fu79/e3/+AQ/8jHgMYcul/zKf/Qaf+R70GMOzW/7jfAAYeBzDyOYCh1wGM/Q5g8HkIo98DGH6/xvj/P2q0JjuJSI0YAAAAAElFTkSuQmCC"/>
</defs>
</svg>
`);

export const Svg = ({size}: {size: number}) => {
  return (
    <Canvas style={{width: size, height: size}}>
      <ImageSVG svg={inlineSvg} x={0} y={0} width={32} height={56} />
    </Canvas>
  );
};