Search code examples
svgqr-codeadobe-illustrator

Cannot open generated QR code SVG in Adobe Illustrator

I am generating QR code using composer endroid/qr-code php package.

It's so awesome, here are my SVG generation php settings.

// create QR code
$qrCode = QrCode::create($url)
            ->setEncoding(new Encoding('UTF-8'))
            ->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
            ->setSize(210)
            ->setMargin(0)
            ->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
            ->setForegroundColor(new Color(0,0,0))
            ->setBackgroundColor(new Color(255,255,255));

Which outputs this awesome QR code in this SVG format... (minified slightly for demo)

Run snippet below to see SVG code working in HTML...

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="210px" height="210px" viewBox="0 0 210 210">
  <defs>
    <rect id="block" width="30" height="30" fill="#000000" />
  </defs>
  <rect x="0" y="0" width="210" height="210" fill="#ffffff" />
  <use x="0" y="0" href="#block"></use>
  <use x="30" y="0" href="#block"></use>
  <use x="60" y="0" href="#block"></use>
  <use x="90" y="0" href="#block"></use>
  <use x="120" y="0" href="#block"></use>
  <use x="150" y="0" href="#block"></use>
  <use x="180" y="0" href="#block"></use>
  <use x="0" y="30" href="#block"></use>
  <use x="180" y="30" href="#block"></use>
  <use x="0" y="60" href="#block"></use>
  <use x="60" y="60" href="#block"></use>
  <use x="90" y="60" href="#block"></use>
  <use x="120" y="60" href="#block"></use>
  <use x="180" y="60" href="#block"></use>
  <use x="0" y="90" href="#block"></use>
  <use x="60" y="90" href="#block"></use>
  <use x="90" y="90" href="#block"></use>
  <use x="120" y="90" href="#block"></use>
  <use x="180" y="90" href="#block"></use>
  <use x="0" y="120" href="#block"></use>
  <use x="60" y="120" href="#block"></use>
  <use x="90" y="120" href="#block"></use>
  <use x="120" y="120" href="#block"></use>
  <use x="180" y="120" href="#block"></use>
  <use x="0" y="150" href="#block"></use>
  <use x="180" y="150" href="#block"></use>
  <use x="0" y="180" href="#block"></use>
  <use x="30" y="180" href="#block"></use>
  <use x="60" y="180" href="#block"></use>
  <use x="90" y="180" href="#block"></use>
  <use x="120" y="180" href="#block"></use>
  <use x="150" y="180" href="#block"></use>
  <use x="180" y="180" href="#block"></use>
</svg>

But there is nothing that I have not tried, that will make my QR codes open in illustrator.

This code works in my IDE preview, mac preview and it opens fine in chrome and renders fine when used in html pages, but does not open in Illustrator. When I open in Illustrator, it just shows a white box?

Why will this SVG code not work in Adobe Illustrator? How can fix SVG code to work in Illustrator?

I'm using latest version of Adobe Illustrator 28.0

Thanks

Solution

  • Looks like Adobe Illustrator does not yet support bare href attributes and instead needs xlink:href

    When you make this change you'll also need to add a xmlns:xlink="http://www.w3.org/1999/xlink" attribute to the root element.

    Actually I think the code you're using to create the output has a force_xlink_href command so you should just use that and it will all be done for you.

    $builder->writerOptions([
    SvgWriter::WRITER_OPTION_FORCE_XLINK_HREF => true
]);