如何在 deno fresh 中渲染图像

Question

I have a code that is supposed to generate an SVG image. But when I add the code it includes document tags as well.

/** @jsx h */
import { h, Fragment } from "preact";
import { PageProps } from "$fresh/server.ts";

export default function City(props: PageProps ) {
  
  const city = props.params.city.toLowerCase().replace(/-|\s/g," ").replace(/\b(\w)/g, s => s.toUpperCase());
  
  return <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1083' height='708' viewBox='0 0 1083 708'>
    <defs><linearGradient id='linear-gradient' x1='1.074' y1='0.595' x2='-0.058' y2='0.605' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='#69cf9e'/><stop offset='1' stop-color='#4d81ed'/></linearGradient><clipPath id='clip-Illustration'><rect width='1083' height='708'/></clipPath></defs><g id='Illustration' clip-path='url(#clip-Illustration)'><rect width='1083' height='708' fill='#fff'/><text id='Digital_Marketing_Services' data-name='Digital Marketing Services' transform='translate(75 156)' fill='#08379c' stroke='#08379c' stroke-width='1' font-size='74' font-family='Helvetica-Bold, Helvetica' font-weight='700'><tspan x='0' y='0'>Digital Marketing Services </tspan><tspan x='0' y='89'>in {city}</tspan></text><text id='Grow_Your_online_presence_with_Local_SEO_Studio' data-name='Grow Your online presence
    with Local SEO Studio' transform='translate(75 343)' font-size='44' font-family='Helvetica'><tspan x='0' y='0'>Grow Your online presence</tspan><tspan x='0' y='71'>with Local SEO Studio</tspan></text><rect id='Rectangle_1' data-name='Rectangle 1' width='341' height='103' rx='16' transform='translate(75 486)' fill='url(#linear-gradient)'/><path id='Path_1' data-name='Path 1' d='M-71.857-.58A9.067,9.067,0,0,1-76.691.628a10.044,10.044,0,0,1-7.734-3.271q-3.142-3.287-3.142-8.991a13.194,13.194,0,0,1,3.174-9.249,10.818,10.818,0,0,1,8.4-3.48,10.974,10.974,0,0,1,7.275,2.3,8.538,8.538,0,0,1,3.15,5.728h-4.882a4.65,4.65,0,0,0-2.755-3.4,6.767,6.767,0,0,0-2.723-.532A5.914,5.914,0,0,0-80.647-18.1q-1.845,2.167-1.845,6.518,0,4.383,2,6.2A6.561,6.561,0,0,0-75.95-3.561,5.87,5.87,0,0,0-71.857-5a6.234,6.234,0,0,0,1.966-3.779h-5.495v-3.964h9.894V0H-68.78l-.5-2.965A11.38,11.38,0,0,1-71.857-.58Zm25.765-4.576a5.825,5.825,0,0,1-1.627,3.174A7.973,7.973,0,0,1-54.036.58a8.907,8.907,0,0,1-5.914-2.159Q-62.511-3.738-62.511-8.6q0-4.56,2.312-6.993a7.906,7.906,0,0,1,6-2.433,9.2,9.2,0,0,1,3.948.822,6.916,6.916,0,0,1,2.9,2.594,8.851,8.851,0,0,1,1.337,3.625,23.414,23.414,0,0,1,.145,3.48H-57.887A4.365,4.365,0,0,0-56.227-3.8a3.909,3.909,0,0,0,2.288.661,3.293,3.293,0,0,0,2.3-.806,3.827,3.827,0,0,0,.854-1.208Zm-4.544-5.382a4,4,0,0,0-1.1-2.763,3.427,3.427,0,0,0-2.457-.943,3.119,3.119,0,0,0-2.473,1,4.987,4.987,0,0,0-1.1,2.707Zm15.9,7.267V.161l-2.175.081q-3.255.113-4.447-1.128a3.358,3.358,0,0,1-.773-2.433V-14.131h-2.449V-17.4h2.449v-4.9h4.544v4.9h2.852v3.271h-2.852V-4.85A2.09,2.09,0,0,0-37.31-3.5a3.016,3.016,0,0,0,1.676.266q.209,0,.443-.008T-34.732-3.271Zm21.108-.161a8.74,8.74,0,0,0,2.852-.387A2.756,2.756,0,0,0-8.693-6.574,2.033,2.033,0,0,0-9.724-8.4a11.089,11.089,0,0,0-3.239-1.112l-2.514-.564A15.884,15.884,0,0,1-20.6-11.892a5.791,5.791,0,0,1-2.4-5.14,6.864,6.864,0,0,1,2.32-5.3q2.32-2.111,6.816-2.111a10.363,10.363,0,0,1,6.405,1.99,7.105,7.105,0,0,1,2.78,5.777H-9.45a3.407,3.407,0,0,0-1.869-3.045,6.269,6.269,0,0,0-2.884-.6,5.385,5.385,0,0,0-3.062.773,2.463,2.463,0,0,0-1.144,2.159,2.044,2.044,0,0,0,1.128,1.9,13.807,13.807,0,0,0,3.094.983l4.093.983a10.581,10.581,0,0,1,4.061,1.724,5.807,5.807,0,0,1,2.127,4.85A6.845,6.845,0,0,1-6.4-1.539Q-8.886.612-13.43.612a11.409,11.409,0,0,1-7.3-2.119,7.041,7.041,0,0,1-2.659-5.825h4.737A4.877,4.877,0,0,0-17.765-4.9Q-16.556-3.432-13.624-3.432Zm21.06.161V.161L5.261.242Q2.006.354.814-.886A3.358,3.358,0,0,1,.04-3.319V-14.131H-2.409V-17.4H.04v-4.9H4.584v4.9H7.436v3.271H4.584V-4.85A2.09,2.09,0,0,0,4.858-3.5a3.016,3.016,0,0,0,1.676.266q.209,0,.443-.008T7.436-3.271Zm3.609-12.391q1.821-2.32,6.252-2.32a11.108,11.108,0,0,1,5.124,1.144q2.24,1.144,2.24,4.318v8.057q0,.838.032,2.03a2.553,2.553,0,0,0,.274,1.225,1.646,1.646,0,0,0,.677.532V0h-5a5.115,5.115,0,0,1-.29-1q-.081-.467-.129-1.063A9.435,9.435,0,0,1,18.039-.306a6.592,6.592,0,0,1-3.352.854,5.762,5.762,0,0,1-3.94-1.362A4.856,4.856,0,0,1,9.193-4.673a5.009,5.009,0,0,1,2.5-4.689,11.089,11.089,0,0,1,4.028-1.128l1.563-.193a7.168,7.168,0,0,0,1.821-.4,1.381,1.381,0,0,0,.983-1.305,1.549,1.549,0,0,0-.749-1.49,4.681,4.681,0,0,0-2.2-.411,2.865,2.865,0,0,0-2.3.806,3.349,3.349,0,0,0-.645,1.611H9.757A6.739,6.739,0,0,1,11.046-15.662ZM14.462-3.319a2.4,2.4,0,0,0,1.579.532,4.677,4.677,0,0,0,2.731-.87,3.711,3.711,0,0,0,1.3-3.174V-8.54a4.99,4.99,0,0,1-.878.443,7.344,7.344,0,0,1-1.217.314l-1.031.193a6.659,6.659,0,0,0-2.079.628A2.106,2.106,0,0,0,13.8-5.011,2.016,2.016,0,0,0,14.462-3.319ZM37.568-13.326q-2.771,0-3.722,1.8A7.021,7.021,0,0,0,33.314-8.4V0H28.69V-17.563h4.383V-14.5a9.709,9.709,0,0,1,1.853-2.4,5.045,5.045,0,0,1,3.352-1.08q.129,0,.218.008t.395.024v4.705q-.435-.048-.773-.064T37.568-13.326ZM49.621-3.271V.161L47.446.242Q44.191.354,43-.886a3.358,3.358,0,0,1-.773-2.433V-14.131H39.776V-17.4h2.449v-4.9h4.544v4.9h2.852v3.271H46.769V-4.85A2.09,2.09,0,0,0,47.043-3.5a3.016,3.016,0,0,0,1.676.266q.209,0,.443-.008T49.621-3.271ZM67.6-5.156a5.825,5.825,0,0,1-1.627,3.174A7.973,7.973,0,0,1,59.659.58a8.907,8.907,0,0,1-5.914-2.159Q51.184-3.738,51.184-8.6q0-4.56,2.312-6.993a7.906,7.906,0,0,1,6-2.433,9.2,9.2,0,0,1,3.948.822,6.916,6.916,0,0,1,2.9,2.594,8.851,8.851,0,0,1,1.337,3.625,23.414,23.414,0,0,1,.145,3.48H55.808A4.365,4.365,0,0,0,57.468-3.8a3.909,3.909,0,0,0,2.288.661,3.293,3.293,0,0,0,2.3-.806,3.827,3.827,0,0,0,.854-1.208Zm-4.544-5.382a4,4,0,0,0-1.1-2.763,3.427,3.427,0,0,0-2.457-.943,3.119,3.119,0,0,0-2.473,1,4.987,4.987,0,0,0-1.1,2.707ZM86.907-23.719V0H82.444V-2.433A6.478,6.478,0,0,1,80.2-.161a6.288,6.288,0,0,1-3.126.709,6.527,6.527,0,0,1-5.18-2.49,9.56,9.56,0,0,1-2.1-6.389A11,11,0,0,1,71.865-15.4,6.736,6.736,0,0,1,77.4-17.982a5.665,5.665,0,0,1,2.836.7A5.578,5.578,0,0,1,82.25-15.34v-8.379ZM74.532-8.669A6.905,6.905,0,0,0,75.5-4.786a3.218,3.218,0,0,0,2.9,1.466,3.391,3.391,0,0,0,2.965-1.45,6.407,6.407,0,0,0,1.015-3.754q0-3.223-1.627-4.608a3.5,3.5,0,0,0-2.32-.838,3.225,3.225,0,0,0-2.957,1.523A7.055,7.055,0,0,0,74.532-8.669Z' transform='translate(245.83 549.408)' fill='#fff'/><path id='Path_8' data-name='Path 8' d='M36.166-14.451Z' transform='translate(609.064 216.737) rotate(-45)'/><g id='Group_1' data-name='Group 1' transform='translate(21 4)'><path id='Path_2' data-name='Path 2' d='M38.056,70.074C18.131,90.03,8.711,117.766,13.012,143.806c26.041,4.266,53.761-5.17,73.7-25.088,19.924-19.956,29.345-47.692,25.044-73.732C85.715,40.72,57.994,50.156,38.056,70.074Z' transform='translate(669.169 487.067) rotate(-17)' fill='#d26c59'/><path id='Path_3' data-name='Path 3' d='M45.28,63.269A31.225,31.225,0,0,1,29.466,84.732a188.348,188.348,0,0,1,29.619,61.51q6.711-5.882,12.88-12.418a193.93,193.93,0,0,0,30.605-43.1,193.941,193.941,0,0,0,17.311-48.167,180.917,180.917,0,0,1-74.6,20.715Z' transform='translate(755.69 452.723) rotate(-17)' fill='#61b2e4'/><path id='Path_4' data-name='Path 4' d='M25.376,76.073q-6.529,6.151-12.422,12.858a188.394,188.394,0,0,1,61.572,29.513A31.276,31.276,0,0,1,95.881,102.75a180.814,180.814,0,0,1,20.773-74.527l.035-.071A191.426,191.426,0,0,0,25.376,76.073Z' transform='translate(649.515 405.237) rotate(-17)' fill='#92d3f5'/><path id='Path_5' data-name='Path 5' d='M81.124,67.413c-33,33.123-52.779,76.731-55.026,121.328a31.424,31.424,0,0,1,37.036,37.166c44.634-2.277,88.266-22.094,121.385-55.134,42.34-42.41,62.353-101.356,53.2-156.693A164.934,164.934,0,0,0,204.341,12.1C159.085,13.946,114.7,33.869,81.127,67.409Zm64.654-3.338a29.753,29.753,0,0,1,42.068-.008l.008.008a29.732,29.732,0,0,1,.008,42.056l-.008.008a29.748,29.748,0,0,1-42.076-42.063Z' transform='translate(691.103 302.616) rotate(-17)' fill='#1a39b1'/><path id='Path_6' data-name='Path 6' d='M103.758,52.037A91.29,91.29,0,0,1,84.788,68.2C62.768,82.219,36.06,86.078,12.614,78.625a78.481,78.481,0,0,0,.379,22.392c26.041,4.266,53.761-5.17,73.7-25.088A91,91,0,0,0,103.76,52.037Z' transform='translate(681.695 527.977) rotate(-17)' fill='#efb04e'/><path id='Path_7' data-name='Path 7' d='M26.567,73.142q-.312,4.051-.431,8.094a31.439,31.439,0,0,1,36.8,37.228c44.631-2.282,88.258-22.1,121.372-55.142A194.441,194.441,0,0,0,209.379,32.2a194.7,194.7,0,0,1-27.46,20.864C134.245,82.778,76.609,90.228,26.564,73.141Z' transform='translate(722.706 405.306) rotate(-17)' fill='#1d9dc1'/><path id='Path_9' data-name='Path 9' d='M24.265,124.629q8.235-4.137,16.087-9.071a200.159,200.159,0,0,0,41.82-35.044l.018-.018a200.166,200.166,0,0,0,29.857-43.6,6.213,6.213,0,0,0,.66-2.439C91.268,29.7,19.053,99.118,24.265,124.629Z' transform='translate(714.986 418.895) rotate(-17)' fill='#61b2e4'/><path id='Path_10' data-name='Path 10' d='M79.942,92.544A37.466,37.466,0,1,1,117.42,55.078,37.513,37.513,0,0,1,79.942,92.544Zm0-62.444a24.978,24.978,0,1,0,24.985,24.978A25.008,25.008,0,0,0,79.942,30.1Z' transform='translate(782.959 305.927) rotate(-17)' fill='#e2a5cf'/></g></g>
  </svg>
  
}

I'm adding the code above in the routes/[city]/ folder, the file name is featured-image.tsx. For example, if the city name is Miami, the URL looks like the following: localhost:8000/miami/featured-image .

How can I render the image as an SVG file?

Answer 1

You can use a handler function to prepare the SVG when the page is loaded. The handler returns just the pure SVG which can then be used in the Page function to render the page.

/** @jsx h */
import { h, htm } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";

export const handler: Handlers<string | null> = {
   GET(_, ctx) {
    const city = ctx.params.city.toLowerCase().replace(/-|\s/g," ").replace(/\b(\w)/g, s => s.toUpperCase());

    const image = <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1083" height="708" viewBox="0 0 1083 708">
    <defs><linearGradient id="linear-gradient" x1="1.074" y1="0.595" x2="-0.058" y2="0.605" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#69cf9e"/><stop offset="1" stop-color="#4d81ed"/></linearGradient><clipPath id="clip-Illustration"><rect width="1083" height="708"/></clipPath></defs><g id="Illustration" clip-path="url(#clip-Illustration)"><rect width="1083" height="708" fill="#fff"/><text id="Digital_Marketing_Services" data-name="Digital Marketing Services" transform="translate(75 156)" fill="#08379c" stroke="#08379c" stroke-width="1" font-size="74" font-family="Helvetica-Bold, Helvetica" font-weight="700"><tspan x="0" y="0">Digital Marketing Services </tspan><tspan x="0" y="89">in {city}</tspan></text><text id="Grow_Your_online_presence_with_Local_SEO_Studio" data-name="Grow Your online presence
    with Local SEO Studio" transform="translate(75 343)" font-size="44" font-family="Helvetica"><tspan x="0" y="0">Grow Your online presence</tspan><tspan x="0" y="71">with Local SEO Studio</tspan></text><rect id="Rectangle_1" data-name="Rectangle 1" width="341" height="103" rx="16" transform="translate(75 486)" fill="url(#linear-gradient)"/><path id="Path_1" data-name="Path 1" d="M-71.857-.58A9.067,9.067,0,0,1-76.691.628a10.044,10.044,0,0,1-7.734-3.271q-3.142-3.287-3.142-8.991a13.194,13.194,0,0,1,3.174-9.249,10.818,10.818,0,0,1,8.4-3.48,10.974,10.974,0,0,1,7.275,2.3,8.538,8.538,0,0,1,3.15,5.728h-4.882a4.65,4.65,0,0,0-2.755-3.4,6.767,6.767,0,0,0-2.723-.532A5.914,5.914,0,0,0-80.647-18.1q-1.845,2.167-1.845,6.518,0,4.383,2,6.2A6.561,6.561,0,0,0-75.95-3.561,5.87,5.87,0,0,0-71.857-5a6.234,6.234,0,0,0,1.966-3.779h-5.495v-3.964h9.894V0H-68.78l-.5-2.965A11.38,11.38,0,0,1-71.857-.58Zm25.765-4.576a5.825,5.825,0,0,1-1.627,3.174A7.973,7.973,0,0,1-54.036.58a8.907,8.907,0,0,1-5.914-2.159Q-62.511-3.738-62.511-8.6q0-4.56,2.312-6.993a7.906,7.906,0,0,1,6-2.433,9.2,9.2,0,0,1,3.948.822,6.916,6.916,0,0,1,2.9,2.594,8.851,8.851,0,0,1,1.337,3.625,23.414,23.414,0,0,1,.145,3.48H-57.887A4.365,4.365,0,0,0-56.227-3.8a3.909,3.909,0,0,0,2.288.661,3.293,3.293,0,0,0,2.3-.806,3.827,3.827,0,0,0,.854-1.208Zm-4.544-5.382a4,4,0,0,0-1.1-2.763,3.427,3.427,0,0,0-2.457-.943,3.119,3.119,0,0,0-2.473,1,4.987,4.987,0,0,0-1.1,2.707Zm15.9,7.267V.161l-2.175.081q-3.255.113-4.447-1.128a3.358,3.358,0,0,1-.773-2.433V-14.131h-2.449V-17.4h2.449v-4.9h4.544v4.9h2.852v3.271h-2.852V-4.85A2.09,2.09,0,0,0-37.31-3.5a3.016,3.016,0,0,0,1.676.266q.209,0,.443-.008T-34.732-3.271Zm21.108-.161a8.74,8.74,0,0,0,2.852-.387A2.756,2.756,0,0,0-8.693-6.574,2.033,2.033,0,0,0-9.724-8.4a11.089,11.089,0,0,0-3.239-1.112l-2.514-.564A15.884,15.884,0,0,1-20.6-11.892a5.791,5.791,0,0,1-2.4-5.14,6.864,6.864,0,0,1,2.32-5.3q2.32-2.111,6.816-2.111a10.363,10.363,0,0,1,6.405,1.99,7.105,7.105,0,0,1,2.78,5.777H-9.45a3.407,3.407,0,0,0-1.869-3.045,6.269,6.269,0,0,0-2.884-.6,5.385,5.385,0,0,0-3.062.773,2.463,2.463,0,0,0-1.144,2.159,2.044,2.044,0,0,0,1.128,1.9,13.807,13.807,0,0,0,3.094.983l4.093.983a10.581,10.581,0,0,1,4.061,1.724,5.807,5.807,0,0,1,2.127,4.85A6.845,6.845,0,0,1-6.4-1.539Q-8.886.612-13.43.612a11.409,11.409,0,0,1-7.3-2.119,7.041,7.041,0,0,1-2.659-5.825h4.737A4.877,4.877,0,0,0-17.765-4.9Q-16.556-3.432-13.624-3.432Zm21.06.161V.161L5.261.242Q2.006.354.814-.886A3.358,3.358,0,0,1,.04-3.319V-14.131H-2.409V-17.4H.04v-4.9H4.584v4.9H7.436v3.271H4.584V-4.85A2.09,2.09,0,0,0,4.858-3.5a3.016,3.016,0,0,0,1.676.266q.209,0,.443-.008T7.436-3.271Zm3.609-12.391q1.821-2.32,6.252-2.32a11.108,11.108,0,0,1,5.124,1.144q2.24,1.144,2.24,4.318v8.057q0,.838.032,2.03a2.553,2.553,0,0,0,.274,1.225,1.646,1.646,0,0,0,.677.532V0h-5a5.115,5.115,0,0,1-.29-1q-.081-.467-.129-1.063A9.435,9.435,0,0,1,18.039-.306a6.592,6.592,0,0,1-3.352.854,5.762,5.762,0,0,1-3.94-1.362A4.856,4.856,0,0,1,9.193-4.673a5.009,5.009,0,0,1,2.5-4.689,11.089,11.089,0,0,1,4.028-1.128l1.563-.193a7.168,7.168,0,0,0,1.821-.4,1.381,1.381,0,0,0,.983-1.305,1.549,1.549,0,0,0-.749-1.49,4.681,4.681,0,0,0-2.2-.411,2.865,2.865,0,0,0-2.3.806,3.349,3.349,0,0,0-.645,1.611H9.757A6.739,6.739,0,0,1,11.046-15.662ZM14.462-3.319a2.4,2.4,0,0,0,1.579.532,4.677,4.677,0,0,0,2.731-.87,3.711,3.711,0,0,0,1.3-3.174V-8.54a4.99,4.99,0,0,1-.878.443,7.344,7.344,0,0,1-1.217.314l-1.031.193a6.659,6.659,0,0,0-2.079.628A2.106,2.106,0,0,0,13.8-5.011,2.016,2.016,0,0,0,14.462-3.319ZM37.568-13.326q-2.771,0-3.722,1.8A7.021,7.021,0,0,0,33.314-8.4V0H28.69V-17.563h4.383V-14.5a9.709,9.709,0,0,1,1.853-2.4,5.045,5.045,0,0,1,3.352-1.08q.129,0,.218.008t.395.024v4.705q-.435-.048-.773-.064T37.568-13.326ZM49.621-3.271V.161L47.446.242Q44.191.354,43-.886a3.358,3.358,0,0,1-.773-2.433V-14.131H39.776V-17.4h2.449v-4.9h4.544v4.9h2.852v3.271H46.769V-4.85A2.09,2.09,0,0,0,47.043-3.5a3.016,3.016,0,0,0,1.676.266q.209,0,.443-.008T49.621-3.271ZM67.6-5.156a5.825,5.825,0,0,1-1.627,3.174A7.973,7.973,0,0,1,59.659.58a8.907,8.907,0,0,1-5.914-2.159Q51.184-3.738,51.184-8.6q0-4.56,2.312-6.993a7.906,7.906,0,0,1,6-2.433,9.2,9.2,0,0,1,3.948.822,6.916,6.916,0,0,1,2.9,2.594,8.851,8.851,0,0,1,1.337,3.625,23.414,23.414,0,0,1,.145,3.48H55.808A4.365,4.365,0,0,0,57.468-3.8a3.909,3.909,0,0,0,2.288.661,3.293,3.293,0,0,0,2.3-.806,3.827,3.827,0,0,0,.854-1.208Zm-4.544-5.382a4,4,0,0,0-1.1-2.763,3.427,3.427,0,0,0-2.457-.943,3.119,3.119,0,0,0-2.473,1,4.987,4.987,0,0,0-1.1,2.707ZM86.907-23.719V0H82.444V-2.433A6.478,6.478,0,0,1,80.2-.161a6.288,6.288,0,0,1-3.126.709,6.527,6.527,0,0,1-5.18-2.49,9.56,9.56,0,0,1-2.1-6.389A11,11,0,0,1,71.865-15.4,6.736,6.736,0,0,1,77.4-17.982a5.665,5.665,0,0,1,2.836.7A5.578,5.578,0,0,1,82.25-15.34v-8.379ZM74.532-8.669A6.905,6.905,0,0,0,75.5-4.786a3.218,3.218,0,0,0,2.9,1.466,3.391,3.391,0,0,0,2.965-1.45,6.407,6.407,0,0,0,1.015-3.754q0-3.223-1.627-4.608a3.5,3.5,0,0,0-2.32-.838,3.225,3.225,0,0,0-2.957,1.523A7.055,7.055,0,0,0,74.532-8.669Z" transform="translate(245.83 549.408)" fill="#fff"/><path id="Path_8" data-name="Path 8" d="M36.166-14.451Z" transform="translate(609.064 216.737) rotate(-45)"/><g id="Group_1" data-name="Group 1" transform="translate(21 4)"><path id="Path_2" data-name="Path 2" d="M38.056,70.074C18.131,90.03,8.711,117.766,13.012,143.806c26.041,4.266,53.761-5.17,73.7-25.088,19.924-19.956,29.345-47.692,25.044-73.732C85.715,40.72,57.994,50.156,38.056,70.074Z" transform="translate(669.169 487.067) rotate(-17)" fill="#d26c59"/><path id="Path_3" data-name="Path 3" d="M45.28,63.269A31.225,31.225,0,0,1,29.466,84.732a188.348,188.348,0,0,1,29.619,61.51q6.711-5.882,12.88-12.418a193.93,193.93,0,0,0,30.605-43.1,193.941,193.941,0,0,0,17.311-48.167,180.917,180.917,0,0,1-74.6,20.715Z" transform="translate(755.69 452.723) rotate(-17)" fill="#61b2e4"/><path id="Path_4" data-name="Path 4" d="M25.376,76.073q-6.529,6.151-12.422,12.858a188.394,188.394,0,0,1,61.572,29.513A31.276,31.276,0,0,1,95.881,102.75a180.814,180.814,0,0,1,20.773-74.527l.035-.071A191.426,191.426,0,0,0,25.376,76.073Z" transform="translate(649.515 405.237) rotate(-17)" fill="#92d3f5"/><path id="Path_5" data-name="Path 5" d="M81.124,67.413c-33,33.123-52.779,76.731-55.026,121.328a31.424,31.424,0,0,1,37.036,37.166c44.634-2.277,88.266-22.094,121.385-55.134,42.34-42.41,62.353-101.356,53.2-156.693A164.934,164.934,0,0,0,204.341,12.1C159.085,13.946,114.7,33.869,81.127,67.409Zm64.654-3.338a29.753,29.753,0,0,1,42.068-.008l.008.008a29.732,29.732,0,0,1,.008,42.056l-.008.008a29.748,29.748,0,0,1-42.076-42.063Z" transform="translate(691.103 302.616) rotate(-17)" fill="#1a39b1"/><path id="Path_6" data-name="Path 6" d="M103.758,52.037A91.29,91.29,0,0,1,84.788,68.2C62.768,82.219,36.06,86.078,12.614,78.625a78.481,78.481,0,0,0,.379,22.392c26.041,4.266,53.761-5.17,73.7-25.088A91,91,0,0,0,103.76,52.037Z" transform="translate(681.695 527.977) rotate(-17)" fill="#efb04e"/><path id="Path_7" data-name="Path 7" d="M26.567,73.142q-.312,4.051-.431,8.094a31.439,31.439,0,0,1,36.8,37.228c44.631-2.282,88.258-22.1,121.372-55.142A194.441,194.441,0,0,0,209.379,32.2a194.7,194.7,0,0,1-27.46,20.864C134.245,82.778,76.609,90.228,26.564,73.141Z" transform="translate(722.706 405.306) rotate(-17)" fill="#1d9dc1"/><path id="Path_9" data-name="Path 9" d="M24.265,124.629q8.235-4.137,16.087-9.071a200.159,200.159,0,0,0,41.82-35.044l.018-.018a200.166,200.166,0,0,0,29.857-43.6,6.213,6.213,0,0,0,.66-2.439C91.268,29.7,19.053,99.118,24.265,124.629Z" transform="translate(714.986 418.895) rotate(-17)" fill="#61b2e4"/><path id="Path_10" data-name="Path 10" d="M79.942,92.544A37.466,37.466,0,1,1,117.42,55.078,37.513,37.513,0,0,1,79.942,92.544Zm0-62.444a24.978,24.978,0,1,0,24.985,24.978A25.008,25.008,0,0,0,79.942,30.1Z" transform="translate(782.959 305.927) rotate(-17)" fill="#e2a5cf"/></g></g>
    </svg>
  
    return ctx.render(image);
  },
};

export default function Page({ data }: PageProps<string | null>) {

  return (
    <div>
      <h1>Welcome</h1>
      {data}
    </div>
  );
}