Shopify / react-native-skia

High-performance React Native Graphics using Skia

Home Page:https://shopify.github.io/react-native-skia

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with Rendering SVGs Using xlink:href

lucaspelloni2 opened this issue ยท comments

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>
  );
};

๐ŸŽ‰ This issue has been resolved in version 1.3.2 ๐ŸŽ‰

The release is available on:

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€