postercitos

Create flyers and posters dynamically!

Usage

Images

input

<svg width="1080" height="1080" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img-container" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 500 500">
      <poster-image
        id="image"
        width="500"
        height="500"
        poster:assets="images%"
        preserveAspectRatio="xMidYMid slice"/>
    </pattern>
  </defs>
  <rect width="1080" height="1080" fill="url(#img-container)"/>
</svg>

output

<svg width="1080" height="1080" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img-container" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 500 500">
      <image
        id="image"
        width="500"
        height="500"
        xlink:href="data:image/jpeg;base64,(BASE64 CODE)"
        preserveAspectRatio="xMidYMid slice"/>
    </pattern>
  </defs>
  <rect width="1080" height="1080" fill="url(#img-container)"/>
</svg>

input

<svg width="1058" height="1058" viewBox="0 0 1058 1058" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="circleClip">
      <circle cx="529" cy="529" r="529"/>
    </clipPath>
  </defs>
  <poster-image xlink:href="data:image/jpeg;base64,/9j/4AAQSk...(base64)" width="100%" height="100%" clip-path="url(#circleClip)" preserveAspectRatio="xMidYMid slice"/>
</svg>

output

<svg width="1058" height="1058" viewBox="0 0 1058 1058" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="circleClip">
      <circle cx="529" cy="529" r="529"/>
    </clipPath>
  </defs>
  <image xlink:href="data:image/jpeg;base64,/9j/4AAQSk...(base64)" width="100%" height="100%" clip-path="url(#circleClip)" preserveAspectRatio="xMidYMid slice"/>
</svg>

To do

• Hacer que las imágenes se embeban al final del parse, porque si tiene que parsear la imagen embebida, tarda más
• Unir distintos textos con distintos formatos. Algunas ideas: <poster-paragraph/> \<poster-text/>