The export as SVG is indeed easy. I've added this helper class to CardsMorphic-StephanEggermont.56 It is not well-factored, and for now ignores font families. A class helper method to directly create a file: CardSvgWriter class>newFile: aString on: aCardWall ^self new write: aCardWall to: (aString asFileReference writeStream ) Write a SVG header, the size and then the contents of the cardwall, finally close the SVG. CardSvgWriter>>write: aWall to: aStream stream := aStream. stream nextPutAll: self fileHeader. self fileSized: aWall fullFrame. stream cr. aWall cardSpace submorphsDo: [ :column | self writeColumn: column]. stream nextPutAll: '</svg>'. stream close SVG is an XML format CardSvgWriter>>fileHeader ^'<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> ' Take the SVG size from the CardWall morph. Two namespaces are needed, the second one to make the images work. CardSvgWriter>>fileSized: frame stream nextPutAll: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox = "', (frame left) asString,' ', (frame top) asString,' ', (frame width) asString,' ', (frame height) asString,'" version = "1.1">' For each column, write the title and a gray background CardSvgWriter>>writeColumn: aColumn |background| stream nextPutAll: '<text x="',(aColumn left+2) asString,'" y="',(aColumn top+2) asString,'" fill="gray" font-size= "11">'. stream nextPutAll: aColumn title. stream nextPutAll: '</text>'. stream cr. background := aColumn submorphs first. stream nextPutAll: '<rect x= "',(background left) asString, '" y="',(background top) asString, '" width="',(background width) asString, '" height="',(background height) asString, '" fill="rgb(250,250,250)" />'. stream cr. background submorphsDo: [ :card | self writeCard: card ]. for each card, write its components CardSvgWriter>>writeCard: aCard self writeCardRectangle: aCard. self writeCardText: aCard. self writeCardImage: aCard The rectangle still has hardcoded border and borderColor CardSvgWriter>>writeCardRectangle: aCard stream nextPutAll: '<rect x= "',(aCard left) asString, '" y="',(aCard top) asString, '" width="',(aCard width) asString, '" height="',(aCard height) asString, '" stroke="','rgb(240,240,240)'"aCard borderColor asHTMLColor", '" stroke-width="', '1',"aCard borderWidth asString," '" fill="',aCard color asHTMLColor,'" />'. stream cr. Positioning of text is different in SVG and Morphic. In SVG, it is the left-bottom, vs left-top in Morphic. CardSVGWriter>>writeCardText: aCard stream nextPutAll: '<text x="',(aCard left+2) asString,'" y="',(aCard top+12) asString,'" fill="black" font-size= "10">'. stream nextPutAll: aCard title. stream nextPutAll: '</text>'. stream cr. The avatars are jpegs. they need to be base64 encoded. Here they are repeated for each card, they should be written once and linked. CardSVGWriter>writeCardImage: aCard aCard person ifNotNil: [ stream nextPutAll: '<image x="',(aCard right-32) asString,'" y="',(aCard bottom-32) asString,'" width="32" height="32" xlink:href="data:image/jpg;base64,', (ZnUtils encodeBase64: (ByteArray streamContents: [:s | PluginBasedJPEGReadWriter putForm: (AvatarCache default imageFor: aCard person) onStream: s])) ,'"/>'. stream cr]
